Une brève discussion sur la façon de maintenir la séparation des préoccupations à l'aide des instructions angulaires ?

Comment maintenir la séparation des préoccupations à l'aide des directives Angular ? L'article suivant vous présentera comment maintenir la séparation des préoccupations grâce aux instructions angulaires. J'espère qu'il vous sera utile !

Disons que nous avons un composant de sélection de date dans notre application. Chaque fois que l'utilisateur modifie la date, un événement est envoyé au fournisseur d'analyse. Jusqu'à présent, nous ne l'avons utilisé qu'une seule fois, cette interface d'analyse peut donc être placée dans le composant qui l'utilise : [Recommandation de tutoriel associée : "tutoriel angulaire"]

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

Mais, Maintenant, nous avons plus d'endroits pour utiliser cette interface d'analyse et nous ne voulons pas écrire le même code à plusieurs reprises. Quelqu'un pourrait suggérer que ce code pourrait être incorporé dans un sélecteur de date et transmis comme paramètre d'entrée.

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

    ...
  }
}

En effet, cela peut être réalisé, mais ce n'est pas une conception idéale. Séparation des préoccupations signifie que le sélecteur de date lui-même n'a rien à voir avec l'interface d'analyse et qu'il n'a pas besoin de connaître d'informations sur l'interface d'analyse.

De plus, le sélecteur de date étant un composant interne, nous pouvons modifier son code source, mais que se passe-t-il s'il s'agit d'un composant tiers ? Comment le résoudre ?

Le meilleur choix ici est la directive Angular. Créez une directive, obtenez la référence du formulaire via DI et abonnez-vous à la modification de la valeur interne pour déclencher l'événement d'analyse. 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
          }
        );
      });
  }
}

peut désormais être utilisé à chaque fois que le sélecteur de date est utilisé.

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

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!