利用Angular指令怎麼保持關注點分離？以下這篇文章跟大家介紹一下透過Angular指令保持關注點分離的方法，希望對大家有幫助！
假設在我們的應用程式中有一個日期選擇器元件。使用者每次更改日期的時，都會向分析提供者發送事件。到目前位置，我們只使用過一次，所以這個分析介面可以放在使用它的元件中：【相關教學推薦：《angular教學》】
##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,
});
});
}
}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,
});
...
}
}關注點分離意味著日期選擇器本身是和分析介面沒有關係的，它也不需要了解任何分析介面的資訊。
此外，因為日期選擇器是一個內部的元件，我們可以修改他的原始碼，但是如果是第三方的元件？該如何解決？ 這裡更好的選擇時Angular指令，建立一個指令，透過DI取得表單的引用，訂閱內部值的修改來觸發分析事件。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
}
);
});
}
}<date-picker [formControl]="control" datePickerAnalytics="fooPage"></date-picker>
程式設計影片！ ！
以上是淺談利用Angular指令怎麼保持關注點分離？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
