如何利用Angular指令保持關(guān)注點(diǎn)分離

這篇文章將為大家詳細(xì)講解有關(guān)如何利用Angular指令保持關(guān)注點(diǎn)分離，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

假設(shè)在我們的應(yīng)用程序中有一個(gè)日期選擇器組件。用戶每次更改日期的時(shí)，都會給分析提供商發(fā)送一個(gè)事件。到目前位置，我們只使用過一次，所以這個(gè)分析接口可以放在使用它的組件中：

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,
        });
      });
  }
}

但是，現(xiàn)在我們有更多的地方使用這段分析的接口，我們并不想重復(fù)的編寫同樣的代碼。有人可能提出這段代碼可以合并到日期選擇器中并作為輸入?yún)?shù)傳遞。

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,
    });

    ...
  }
}

確實(shí)，這樣可以實(shí)現(xiàn)，但是這并不是理想的設(shè)計(jì)。關(guān)注點(diǎn)分離意味著日期選擇器本身是和分析接口沒有關(guān)系的，它也不需要了解任何分析接口的信息。

此外，因?yàn)槿掌谶x擇器是一個(gè)內(nèi)部的組件，我們可以修改他的源碼，但是如果是第三方的組件？該如何解決？

這里更好的選擇時(shí)Angular指令，創(chuàng)建一個(gè)指令，通過DI獲取表單的引用，訂閱內(nèi)部值的修改來觸發(fā)分析事件。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
          }
        );
      });
  }
}

現(xiàn)在可以在每次使用日期選擇器時(shí)使用它了。

<date-picker [formControl]="control" datePickerAnalytics="fooPage"></date-picker>

關(guān)于“如何利用Angular指令保持關(guān)注點(diǎn)分離”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。