Une brève discussion sur les méthodes d'interaction des composants angulaires

Cet article parlera avec vous des méthodes d'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 des composants permet deux partages informations entre un ou plusieurs composants.

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 spécifiques peuvent être traitées dans le sous-composant ou le flux de travail. .

Méthodes d'interaction :

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

Tutoriels associés recommandés : "Tutoriel angulaire"

---

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

Transmettez les données du composant parent au composant enfant via la liaison d'entrée.
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 la méthode setter

Utilisez la méthode setter() d'un attribut d'entrée pour intercepter les changements 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 OnChanges interface de hook de cycle de vie pour écouter les modifications des valeurs des propriétés d'entrée et répondre.
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 les services

Le composant parent et son composant enfant partagent le même et utilisez 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.

---

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!