Explication détaillée de l'interaction des composants dans Angular

Cet article vous présentera en détail l'interaction des composants angulaires. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Interaction des composants angulaires

Interaction des composants : La communication entre les composants permet à deux composants ou plus de partager des informations entre eux. .
Scénarios d'utilisation : Lorsqu'une certaine fonction est utilisée dans plusieurs composants, la fonction spécifique peut être encapsulée dans un sous-composant et des tâches ou flux de travail spécifiques peuvent être traités dans le sous-composant.
Méthodes d'interaction :

• Méthode 1 : Interagissez via les décorateurs @Input et @Output.
• Méthode 2 : Interagissez via 服务.

[Recommandation associée : "Tutoriel angulaire"]

---

Transférer les données du composant parent au composant enfant

Par type d'entrée la liaison transmet les données du composant parent au composant enfant.
La propriété input est une propriété paramétrable avec le décorateur @Input.
Les valeurs « affluent » dans cette propriété lorsqu'elle est liée via une liaison de propriété.

Quelques exemples de code sont les suivants :

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-selector',
  template: `
    // 模板代码
  `
})
export class TestComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

L'exemple ci-dessus contient deux attributs d'entrée. Le deuxième @Input spécifie un alias master pour le nom d'attribut masterName du sous-composant.

Référencez le composant enfant dans le composant parent. Quelques exemples de code sont les suivants :

    <app-hero-child *ngFor="let hero of heroes"
      [hero] = "hero"
      [master] = "master">
    </app-hero-child>

---

Écoutez les modifications des valeurs des attributs d'entrée

(1) Utilisez le méthode setter

Utilisez la méthode setter() d'un attribut d'entrée pour intercepter le changement de valeur dans le composant parent et agir.

Quelques exemples de code sont les suivants :

export class TestComponent {
	
	@Input()
	set name(name: String) {
		// 逻辑处理
	}
}

(2) Utilisez la méthode ngOnChanges()

Utilisez la méthode ngOnChanges() de l'interface hook de cycle de vie OnChanges pour surveiller changements dans les valeurs des attributs d’entrée et réponse.
Remarque : Lorsque plusieurs propriétés d'entrée interactives doivent être surveillées, cette méthode est plus appropriée que l'utilisation de la méthode de définition de la propriété.

Importer Input, OnChanges et SimpleChange depuis @angular/core dans le composant enfant

import { Component, Input, OnChanges, SimpleChange } from '@angular/core';

@Component({
  selector: 'app-version-child',
  template: `
  // 模板代码
  `
})
export class ChildComponent implements OnChanges {
  @Input() major: number;
  @Input() minor: number;

  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
    for (let propName in changes) {
      // propName为输入属性的名字
      let changedProp = changes[propName]; // changedProp为SimpleChange对象
      // 其它代码
    }
  }
}

Classe SimpleChangeLe code source est le suivant :

/**
 * Represents a basic change from a previous to a new value for a single
 * property on a directive instance. Passed as a value in a
 * {@link SimpleChanges} object to the `ngOnChanges` hook.
 *
 * @see `OnChanges`
 *
 * @publicApi
 */
export declare class SimpleChange {
    previousValue: any;
    currentValue: any;
    firstChange: boolean;
    constructor(previousValue: any, currentValue: any, firstChange: boolean);
    /**
     * Check whether the new value is the first value assigned.
     */
    isFirstChange(): boolean;
}

---

Le composant parent écoute les événements du composant enfant

Le composant enfant expose une propriété EventEmitter Lorsqu'un événement se produit, le composant enfant utilise cette propriété pour émettre (éjection vers le haut. ) événements. Le composant parent se lie à cette propriété d'événement et répond lorsque l'événement se produit.

La propriété EventEmitter d'un composant enfant est une propriété de sortie, généralement avec un décorateur @Output.

——Interaction entre les composants angulaires

---

Le composant parent et le composant enfant communiquent via le service

Le composant parent et son composant enfant partagent le même service, en utilisant Ce service permet communication bidirectionnelle au sein d’une 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.

---

Documentation détaillée

Pour une documentation détaillée, veuillez vous référer à Contenu lié à l'interaction des composants angulaires

Plus de détails sur la programmation connaissances, 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!