Angular 命令を使用して関心の分離を維持する方法についての簡単な説明?

Angular ディレクティブを使用して関心の分離を維持するにはどうすればよいですか?次の記事では、Angular 命令を通じて関心の分離を維持する方法を紹介します。

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

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