Einführung in 5 Methoden der Komponentenkommunikation in Angular

Komponentisierung ist das Kernkonzept von Angular, daher wird Komponentenkommunikation häufiger verwendet und ist sehr wichtig.

Offizielles Portal:

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

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

Empfohlene Tutorials: „angular Tutorial“

Kommunikation zwischen übergeordneter und untergeordneter Komponente Komponente :

// Die Unterkomponente muss Input verwenden, um

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

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

2 zu empfangen. Die Unterkomponente übergibt Daten an die übergeordnete Komponente

【Output EventEmitter】

Unterkomponente:

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

Übergeordnete Komponente:

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

this.childEmit.emit(data);

rrree 3. ViewChild-Methode Deshalb habe ich es hier separat getrennt.

Übergeordnete Komponente:

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

public getData(data:T): void {  }

[Beispiel]

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

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

Nicht-Eltern-Kind-Komponentenkommunikation

1. Der Service

Einzelfallmodus ist tatsächlich eine Variable, die in beide Richtungen ausgelöst werden muss ( Senden von Informationen/Empfangen von Informationen) sowie das Festlegen und Abrufen von Daten müssen von der Komponente selbst durchgeführt werden. service.ts

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

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

Komponente 1 übergibt Informationen an den Dienst

// 父组件
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);
  }
}

Komponente 2 erhält Informationen vom Dienst

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

@Injectable()

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

2. Betreff (veröffentlichen und abonnieren)

Das echte Veröffentlichungs- und Abonnementmodell, wenn sich die Daten ändern, Der Abonnent kann auch eine Antwort erhalten. Hier sind nur Beispiele für Verhalten. Betreff Abonnenten

Betreff

Nein

Nein

Prompte Veröffentlichung. Neue Daten veröffentlichen, sobald sie verfügbar sind

BehaviorSubject

Ja. Die Speicherung des letzten Datenelements bzw. Anfangswertes

wird

rechtzeitig freigegeben. Veröffentlichen, wenn neue Daten verfügbar sind

ReplaySubject

Ja. Alle Daten speichern Nein Zeitgerechte Freigabe. Neue Daten veröffentlichen, sobald sie verfügbar sindAsyncSubjectJa. Das letzte gespeicherte Datenelement ist eine verzögerte Veröffentlichung. Erst wenn die Datenquelle vollständig ist, wird sie freigegeben Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung

		Andere Kommunikationsmethoden	Routenwertübertragung, lokaler Browserspeicher (LocalStorage, SessionStorage), Cookies.
! !

Das obige ist der detaillierte Inhalt vonEinführung in 5 Methoden der Komponentenkommunikation in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!