Angular ディレクティブが懸念事項の分離をどのように維持するかについての詳細な分析?-jsチュートリアル-php.cn

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

ログイン後にコピー

日付ピッカーを使用するたびにこれを使用できるようになりました。

ログイン後にコピー