Eine eingehende Analyse, wie Angular-Anweisungen die Trennung von Belangen aufrechterhalten?

Wie gewährleisten Angular-Anweisungen die Trennung von Belangen? Dieser Artikel zeigt Ihnen, wie Sie die Trennung von Belangen durch die Angular-Richtlinie aufrechterhalten können. Ich hoffe, er wird Ihnen helfen!

Nehmen wir an, wir haben eine Datumsauswahlkomponente in unserer Anwendung. Jedes Mal, wenn der Benutzer das Datum ändert, wird ein Ereignis an den Analyseanbieter gesendet. Bisher haben wir es nur einmal verwendet, sodass diese Analyseschnittstelle in der Komponente platziert werden kann, die sie verwendet:

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

Allerdings haben wir jetzt mehr Orte, an denen wir diese Analyseschnittstelle verwenden können Ich möchte nicht wiederholt denselben Code schreiben. Jemand könnte vorschlagen, dass dieser Code in eine Datumsauswahl integriert und als Eingabeparameter übergeben werden könnte. [Verwandte Tutorial-Empfehlung: „Angular Tutorial“]

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

    ...
  }
}

Dies kann zwar erreicht werden, aber das ist kein ideales Design. Bedenkenstrennung bedeutet, dass der Datumswähler selbst nichts mit der Analyseschnittstelle zu tun hat und keine Informationen über die Analyseschnittstelle kennen muss.

Da es sich bei der Datumsauswahl um eine interne Komponente handelt, können wir außerdem ihren Quellcode ändern. Was aber, wenn es sich um eine Komponente eines Drittanbieters handelt? Wie kann man es lösen?

Die bessere Wahl ist hier die Angular-Direktive. Erstellen Sie eine Direktive, rufen Sie die Referenz des Formulars über DI ab und abonnieren Sie die Änderung des internen Werts, um das Analyseereignis auszulösen. 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
          }
        );
      });
  }
}

kann jetzt jedes Mal verwendet werden, wenn die Datumsauswahl verwendet wird.

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

Englische Originaladresse: https://netbasal.com/maintaining-separation-of-concerns-through-angular-directives-8362ccdf655b

Originalautor: Netanel Basal

Weitere programmierbezogene Kenntnisse finden Sie unter : Programmiervideos! !

Das obige ist der detaillierte Inhalt vonEine eingehende Analyse, wie Angular-Anweisungen die Trennung von Belangen aufrechterhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!