深入淺析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,
        });
      });
  }
}

但是，現在我們有更多的地方使用這段分析的接口，我們不想重複的編寫同樣的程式碼。有人可能提出這段程式碼可以合併到日期選擇器中並作為輸入參數傳遞。 【相關教學推薦：《angular教學》】

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>

英文原文網址：https://netbasal.com/maintaining-separation-of-concerns-through-angular-directives-8362ccdf655b

#原文作者：Netanel Basal

更多程式相關知識，請造訪：程式設計影片！ ！

以上是深入淺析Angular指令如何保持關注點的分離？的詳細內容。更多資訊請關注PHP中文網其他相關文章！