Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use the Angular instruction to keep concerns separate. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Suppose we have a date selector component in our application. Each time the user changes the date, an event is sent to the analysis provider. So far, we have only used it once, so this analysis interface can be placed in the component that uses it:

Header-1.ts

Import {UntilDestroy, untilDestroyed} from'@ ngneat/until-destroyed';@UntilDestroy () class FooComponent {timespanControl = new FormControl (); ngOnInit () {this.timespanControl.valueChanges .pipe (untilDestroyed (this)) .subscribe (({preset}) = > {this.analyticsService.track ('timespan-filter apply', {value: preset,});});}}

However, now that we have more places to use the interface of this analysis, we don't want to write the same code over and over again. One might suggest that this code can be merged into a date selector and passed as an input parameter.

Data-picker-1.component.ts

Class DatePickerComponent {@ Input () analyticsContext: string; constructor (private analyticsService: AnalyticsService) {} apply () {this.analyticsService.track ('timespan-filter apply', {context: this.analyticsContext, value: this.preset,});.}}

Yes, this can be achieved, but it is not an ideal design. Separation of concerns means that the date selector itself has nothing to do with the analysis interface, and it does not need to know any information about the analysis interface.

In addition, because the date selector is an internal component, we can modify its source code, but what if it is a third-party component? How to solve the problem?

A better choice here is the Angular instruction, create an instruction, get a reference to the form through DI, and subscribe to changes in internal values to trigger analysis events. DatePickerAnalytics.directive.ts

@ UntilDestroy () @ Directive ({selector:'[datePickerAnalytics]',}) export class DatePickerAnalyticsDirective implements OnInit {@ Input ('datePickerAnalytics') analyticsContext: string Constructor (private dateFormControl: NgControl, private analyticsService: AnalyticsService) {} ngOnInit () {this.dateFormControl .control.valueChanges.pipe (untilDestroyed (this)) .subscribe (({preset}) = > {this.analyticsService.track ('timespan-filter apply', {value: preset, context: this.analyticsContext});});}}

You can now use the date selector every time you use it.

This is the end of the article on "how to use Angular instructions to maintain separation of concerns". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.