Introduction à 5 méthodes de communication de composants dans Angular

La composantisation est le concept central d'Angular, donc la communication entre composants est utilisée plus fréquemment et est très importante.

Portail officiel :

https://angular.io/guide/component-interaction

https://angular.cn/guide/component- interaction

Recommandations de didacticiel associées : "Tutoriel angulaire"

Communication des composants parent-enfant

Mots clésEntrée Sortie EventEmitter ViewChild

1. Le composant parent transmet les données au composant enfant

[Input]

Comment lier les attributs

Composant parent :

<!-- parentComponent -->
<app-child [name]="&#39;childName&#39;"></app-child>

Composant enfant :
// Le composant enfant doit utiliser Input pour recevoir

<span>{{name}}</span>

@Input() public name:string = '';

2. L'enfant le composant doit utiliser Input pour recevoir les données des passes du composant

[Output EventEmitter]

Composant enfant :

@Output()
public readonly childEmit: EventEmitter<T> = new EventEmitter<T>();

this.childEmit.emit(data);

Composant parent :

<app-child (childEmit)="getData($event)"></app-child>

public getData(data:T): void {  }

3. Méthode ViewChild

Car je pense que cette méthode peut non seulement permettre au composant parent d'obtenir les données du composant enfant, mais aussi permettre au composant parent de définir des valeurs de variable pour le composant enfant, etc., je l'ai donc séparé ici séparément.

Composant parent :

<app-child **#child**></app-child>

<button (click)="**child**.print(&#39;---&#39;)">点击</button>

@ViewChild('child', { static: true })
public child!: ElementRef<HTMLElement>;

public print():void{
     if(this.child){
       // 这里得到child，可以使用child中的所有的public属性方法
       this.child.print(&#39;hello2&#39;);
     }
}

[Exemple]

// 父组件
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child #child [name]="name" (childEmit)="childClick($event)"></app-child>
    <button (click)="child.print(&#39;hello1&#39;)">调用子组件的方法1</button>
    <button (click)="print()">调用子组件的方法2</button>
  `
})

export class ParentComponent {

   public name:string = &#39;大儿子&#39;;
   @ViewChild(&#39;child&#39;, { static: true })
   public child!: ElementRef<HTMLElement>;

   public childClick(bool:Boolean):void{
      // TODO
   }

   public print():void{
      if(this.child){
        this.child.print(&#39;hello2&#39;);
     }
   }
}
/*****************************************************/
// 子组件

import { Component, Input, Output, EventEmitter } from &#39;@angular/core&#39;;

@Component({
  selector: &#39;app-child&#39;,
  template: `
    <h3 (click)="myClick()">{{name}}</h3>
  `
})

export class HeroChildComponent {
  @Input() 
  public name: string;

  @Output()
  public readonly childEmit: EventEmitter<boolean> = new EventEmitter<boolean>();

  public myClick():void{
    this.childEmit.emit(true);
  }

  public print(content:string):void{
    console.log(content);
  }
}

Communication entre composants non parent-enfant

1. Service

Le mode Singleton est en fait une variable, qui nécessite un déclenchement bidirectionnel (envoi d'informations/réception d'informations), et la définition et l'obtention de données nécessitent que le composant lui-même les gère.

service.ts

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

@Injectable()

export class myService {
  public info: string = '';
}

Le composant 1 transmet les informations au service

import { Service1 } from '../../service/service1.service';
...

public constructor(
  public service: Service1,
) { }

public changeInfo():void {
  this.service.info = this.service.info + '1234';
}
...

Le composant 2 obtient des informations du service

import { Service2 } from '../../service/service2.service';
...

public constructor(
  public service: Service2,
) { }

public showInfo() {
  console.log(this.service.info);
}
...

2. Abonnement)

Le véritable modèle de publication-abonnement, lorsque les données changent, l'abonné peut également obtenir une réponse. Voici seulement des exemples de BehaviorSubject

// Service
import { BehaviorSubject } from 'rxjs';
...
public messageSource = new BehaviorSubject<string>(&#39;Start&#39;);
public changeMessage(message: string): void {
  this.messageSource.next(message);
}

public getMessageSource(): Observable<string> {
  return this.messageSource.asObservable();
}

/////////////////////////
// 发布
...
this.messageService.changeMessage(&#39;message change&#39;);
/////////////////////////
public 
// 订阅 (记得根据需要选择是否取消订阅 unsubscribe)
this.messageService.getMessageSource().subscribe(m => {
  console.log(m);
})

Comparaison de quatre sujets <.>

rxjs subject	是否存储数据	是否需要初始值	何时向订阅者发布数据
Subject	否	否	及时发布。有新数据就发布
BehaviorSubject	是。存储最后一条数据或者初始值	是	及时发布。有新数据就发布
ReplaySubject	是。存储所有数据	否	及时发布。有新数据就发布
AsyncSubject	是。存储最后一条数据	是	延时发布。只有当数据源complete的时候才会发布

Autres méthodes de communication

Valeur de routage, stockage local du navigateur (LocalStorage, SessionStorage), cookie.

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!