Angular ディレクティブが懸念事項の分離をどのように維持するかについての詳細な分析?

Angular ディレクティブは懸念事項の分離をどのように維持しますか?この記事では、Angular ディレクティブを通じて関心の分離を維持する方法を説明します。

アプリケーションに日付ピッカー コンポーネントがあるとします。ユーザーが日付を変更するたびに、イベントが分析プロバイダーに送信されます。これまでのところ、これを 1 回しか使用していないため、この分析インターフェイスは、それを使用するコンポーネントに配置できます:

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 中国語 Web サイトの他の関連記事を参照してください。