Une brève analyse de la façon de communiquer entre les composants non parents et enfants dans Angular

Comment communiquer entre composants non parent-enfant dans Angular ? Cet article vous présentera comment les composants Angularnon-parent-enfant communiquent via les services. J'espère qu'il vous sera utile !

En fait, lorsqu'il s'agit de transmettre des valeurs entre les composants parent et enfant, nous le connaissons très bien et c'est très courant dans le processus de mise en œuvre commerciale.

Mais mon processus d'implémentation implique plusieurs niveaux (c'est-à-dire un transfert de valeur entre les composants non parents et enfants). Oui, je peux le transmettre couche par couche et obtenir la valeur transmise du composant enfant dans le composant parent. il y a une meilleure façon ? [Recommandation de tutoriel associée : "tutoriel angulaire"]

Contexte des exigences :

a un sous-composant, qui peut être compris comme un composant de troisième niveau. Il y a une liste déroulante dans ce composant. une certaine balise li est cliqué, la valeur sélectionnée correspondante doit être transmise au composant de premier niveau. En même temps, le composant de premier niveau demande l'interface de liste avec la valeur reçue, puis actualise les données.

Idée initiale :

À cette époque, je pensais enregistrer la valeur sélectionnée par l'utilisateur via le stockage local, puis retirer la valeur via le stockage local dans le composant utilisé, et demander cependant l'interface avec la valeur ; , cela n'a pas pu être fait en temps réel. Une fois que l'utilisateur l'a sélectionné, cela ne me déclenche pas pour obtenir des données dans le composant parent. Autrement dit, si la valeur du composant enfant change, comment puis-je en informer le composant parent.

Points techniques :

Le composant parent angulaire et les composants enfants communiquent via des services

Le composant parent et ses composants enfants partagent le même service et utilisent ce service pour établir une communication bidirectionnelle au sein de la famille de composants.

La portée de cette instance de service est limitée au composant parent et à ses composants enfants. Les composants en dehors de cette sous-arborescence de composants ne pourront pas accéder au service ni communiquer avec eux.

Principe

Le composant parent et ses composants enfants partagent le même service, et ce service est utilisé pour établir une communication bidirectionnelle au sein de la famille de composants.

La portée de cette instance de service est limitée au composant parent et à ses composants enfants. Les composants en dehors de cette sous-arborescence de composants ne pourront pas accéder au service ni communiquer avec eux. Les services constituent le pont entre les composants enfants et les composants parents, car les services peuvent être facilement injectés dans d'autres composants et parce que les objets Sujet peuvent multidiffuser (transmettre) des données aux composants qui s'abonnent à cet objet, donc combinés avec Angular Service et Subject dans Rxjs peuvent facilement réaliser la communication de données entre les composants.

Implémentation :

Créez un fichier de service dans le sous-composant, le code est le suivant :

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HeaderActionService {
  public pageTenantMode = new Subject<string>();
  // 获得一个Observable;
  missionConfirmed$ = this.pageTenantMode.asObservable();
  constructor() {}

  setParams(params) {
    this.pageTenantMode.next(params);
  }
}

La couche de données du sous-composant appelle la méthode ci-dessus et transmet la valeur.

this.tenantModeService.setParams（）

Injectez le service ci-dessus là où le composant parent l'appelle. Le code est le suivant :

    headerModeService.missionConfirmed$.subscribe(
        () => {
          this.mode = headerModeService.pageTenantMode;
          this.initTableData();
        }
      );

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la 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!