Une analyse approfondie de la manière dont les directives angulaires maintiennent la séparation des préoccupations ?

Comment les directives angulaires maintiennent-elles la séparation des préoccupations ? Cet article vous montrera comment maintenir la séparation des préoccupations grâce à la directive Angular. J'espère que cela 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 :

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

Cependant, maintenant nous avons plus d'endroits pour utiliser cette interface d'analyse, nous je ne veux 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. [Recommandation de tutoriel connexe : "tutoriel angulaire"]

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>

Adresse originale en anglais : https://netbasal.com/maintaining-separation-of-concerns-through-angular-directives-8362ccdf655b

Auteur original : Netanel Basal

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéos 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!