Heim > Web-Frontend > js-Tutorial > Hauptteil

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

青灯夜游
Freigeben: 2022-01-23 09:30:34
nach vorne
2292 Leute haben es durchsucht

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!

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

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,
        });
      });
  }
}
Nach dem Login kopieren

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

    ...
  }
}
Nach dem Login kopieren

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
          }
        );
      });
  }
}
Nach dem Login kopieren

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

<date-picker [formControl]="control" datePickerAnalytics="fooPage"></date-picker>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:juejin.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage