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>

以上是“Angular指令怎么保持關注點的分離”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！