So implementieren Sie die Kommunikation zwischen Eltern-Kind-Komponenten in Angular2

In diesem Artikel werden hauptsächlich Beispiele für die Kommunikationsmethode der Angular2-Eltern-Kind-Komponente vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

Die offizielle Angular2-Dokumentation enthält eine detaillierte Einführung in die Komponenteninteraktion -> Dokumentation – Interaktion zwischen Komponenten. Dem Dokument zufolge gibt es vier Möglichkeiten, zwischen Komponenten zu interagieren, darunter:

1. Übertragen von Daten von der übergeordneten Komponente zur untergeordneten Komponente durch Eingabebindung (@Input-Dekoration) Stellen Sie einen EventEmitter bereit Eigenschaft (@Output-Dekoration) und verwenden Sie diese Eigenschaft, um Ereignisse an die übergeordnete Komponente auszugeben, wenn ein Ereignis auftritt.

2. Übergeordnete Komponenten und untergeordnete Komponenten interagieren über lokale Variablen. (# var)

3. Die übergeordnete Komponente ruft @ViewChild auf.

4. Übergeordnete Komponenten und untergeordnete Komponenten kommunizieren über Dienste.

Hier werde ich nur 3 Methoden zusammenfassen und im Detail vorstellen, die ich im Projekt verwendet habe. Nach dem Lesen dieses Artikels können Sie wahrscheinlich die folgenden Ergebnisse erzielen:

Erstellen Sie ein Projekt mit der folgenden Projektstruktur:

Kommunikation zwischen übergeordneten und untergeordneten Komponenten über @Input- und @Output-Dekoratoren

@Input: Diese Eigenschaftsbindung wird von übergeordneten Komponenten verwendet, um Daten an untergeordnete Komponenten zu übergeben. Untergeordnete Komponenten können Eigenschaftsänderungen über die folgenden zwei Methoden abfangen:

1. Verwenden Sie einen Eingabeeigenschaftssetzer, um Wertänderungen in der übergeordneten Komponente abzufangen.

2. Verwenden Sie ngOnchanges(), um Änderungen in Eingabeattributwerten abzufangen.

@Output: Diese Datenbindung wird von untergeordneten Komponenten verwendet, um Daten und Ereignisse an übergeordnete Komponenten zu übergeben.

<!--parent.component.html-->
<p style="width: 1000px;margin: auto">
<p class="card" style="width: 500px;float: left">
 <p class="card-header">
  父组件
 </p>
 <p class="card-body">
  <h5 class="card-title">父组件</h5>
  <p class="form-group">
   <label for="input">父组件输入：</label>
   <input type="text"
       class="form-control"
       id="input"
       placeholder="Input something"
       [(ngModel)]="parentPrint" 
   >
   <label for="output">父组件输出：</label>
   <input type="text"
       class="form-control"
       id="output"
       placeholder="Output something"
       [(ngModel)]="contentFromChild"
   >
  </p>
 </p>
</p>
<app-child
 [fromParent]="parentPrint"
 (fromChild)="fromChild($event)"
></app-child>
</p>

Der Effekt ist wie folgt: (1. Eingabe der übergeordneten Komponente, untergeordnete Komponente kann synchron ausgegeben werden; 2. Eingabe der untergeordneten Komponente erfordert (3.) Klicken Sie auf die Schaltfläche, um das Startereignis auszulösen und die Daten an die zu übertragen übergeordnete Komponente.)

@Eingabe: Während die übergeordnete Komponente eingibt, kann die untergeordnete Komponente gleichzeitig Daten zur Anzeige abrufen. Der Kerncode lautet wie folgt:

<!--child.component.html-->
<p class="card" style="width: 500px;">
 <p class="card-header">
  子组件
 </p>
 <p class="card-body">
  <h5 class="card-title">子组件</h5>
  <p class="form-group">
   <label for="input">子组件输入：</label>
   <input type="text"
       class="form-control"
       id="input"
       placeholder="Input something"
       [(ngModel)]="contentFromChild"
   >
   <label for="output">子组件输出：</label>
   <input type="text"
       class="form-control"
       id="output"
       placeholder="Output something"
       [(ngModel)]="fromParent"
   >
  </p>
  <button class="btn btn-primary" (click)="clickChild()">Output方式</button>
 </p>
</p>

Verwenden Sie den Setter, um Änderungen in Eingabeattributwerten abzufangen, und deklarieren Sie eine private Variable in der untergeordneten Komponente, um die von der übergeordneten Komponente übergebenen Daten zu erhalten, wodurch die obere Ebene davor geschützt wird Erhalten der Informationen der unteren Schicht. (Ein einfacher Punkt besteht darin, der übergeordneten Komponente nicht mitzuteilen, was die untergeordnete Komponente zum Empfangen der übergebenen Daten verwendet.) Mit dieser Methode kann der gleiche Effekt erzielt werden.

//父组件
parentPrint: any;      //ts中，声明一个变量
[(ngModel)]="parentPrint"  //html中，绑定变量，获取用户输入
//html中，将数据传给子组件
<app-child [fromParent]="parentPrint"></app-child> 
//子组件
@Input() fromParent;    //ts中，用于直接接收从父组件获取的数据
[(ngModel)]="fromParent"  //html中，用于显示数据

@Output: Wenn die übergeordnete Komponente Daten von der untergeordneten Komponente empfängt, stellt die untergeordnete Komponente eine EventEmitter-Eigenschaft bereit. Wenn ein Ereignis auftritt, verwendet die untergeordnete Komponente diese Eigenschaft, um Ereignisse auszugeben (nach oben auszustoßen). Die übergeordnete Komponente bindet an diese Ereigniseigenschaft und reagiert, wenn das Ereignis auftritt. Der Kerncode lautet wie folgt:

//子组件
 private _fromParent: any;   //私有变量，通过setter获取父组件的数据
@Input()            //通过setter获取父组件的数据
 set fromParent(fromParent: any) {
  this._fromParent = fromParent;
 }
 get fromParent(): any {
  return this._fromParent;
 }

//子组件
@Output() fromChild = new EventEmitter<any>(); //暴露一个输出属性

<button class="btn btn-primary" (click)="clickChild()">Output方式</button> 
 //触发发射函数，将数据发送给父组件
 clickChild() {
  console.log(&#39;click child&#39; , this.contentFromChild);
  this.fromChild.emit(this.contentFromChild);
 }

Die übergeordnete Komponente erhält die Daten der untergeordneten Komponente durch Aufrufen von @ViewChild()

Wenn die Klasse der übergeordneten Komponente dies benötigt um die Eigenschaften der untergeordneten Komponente zu lesen und wenn Sie einen Wert hinzufügen oder eine Methode einer Unterkomponente aufrufen, können Sie die Unterkomponente als ViewChild in die übergeordnete Komponente einfügen. ViewChild ermöglicht Ihnen, wie der Name schon sagt, die Anzeige der Eigenschaften und Methoden in Unterkomponenten.

//父组件
[(ngModel)]="contentFromChild" //绑定输出子组件的数据
//使用子组件，绑定事件属性
<app-child
 [fromParent]="parentPrint"
 (fromChild)="fromChild($event)"
></app-child>
//事件处理函数
 fromChild(event) {
  console.log(event);
  this.contentFromChild = event;
 }

<!--parent.component.html-->
<p style="width: 1000px;margin: auto">
<p class="card" style="width: 500px;float: left">
 <p class="card-header">
  父组件
 </p>
 <p class="card-body">
  <h5 class="card-title">父组件</h5>
  <p class="form-group">
   <label for="viewoutput">ViewChild父组件输出：</label>
   <input type="text"
       class="form-control"
       id="viewoutput"
       placeholder="ViewChild父组件输出"
       [(ngModel)]="viewOutput"
   >
  </p>
  <button class="btn btn-primary" (click)="clickView()">ViewChild方式</button>
 </p>
</p>
<app-child></app-child>
</p>

Der Effekt ist wie folgt:

Kerncode der übergeordneten Komponente:

<!--child.component.html-->
<p class="card" style="width: 500px;">
 <p class="card-header">
  子组件
 </p>
 <p class="card-body">
  <h5 class="card-title">子组件</h5>
  <p class="form-group">
   <label for="input">子组件输入：</label>
   <input type="text"
       class="form-control"
       id="input"
       placeholder="Input something"
       [(ngModel)]="contentFromChild"
   >
  </p>
 </p>
</p>

//ts
@ViewChild(ChildComponent)         // 使用viewChild导入引用
private childComponent: ChildComponent;   // 将子组件注入到私有属性
//获取子组件数据并显示
clickView() {
  //直接获取子组件的属性
  this.viewOutput = this.childComponent.contentFromChild;
 }

Übergeordnete Komponente und untergeordnete Komponente kommunizieren durch Dienste

Die übergeordnete Komponente und ihre untergeordneten Komponenten nutzen denselben Dienst und nutzen diesen Dienst, um eine wechselseitige Kommunikation innerhalb der Familie zu erreichen.

//html
[(ngModel)]="viewOutput"
 <button class="btn btn-primary" (click)="clickView()">ViewChild方式</button>

<!--parent.component.html-->
<p style="width: 1000px;margin: auto">
<p class="card" style="width: 500px;float: left">
 <p class="card-header">
  父组件
 </p>
 <p class="card-body">
  <h5 class="card-title">父组件</h5>
  <p class="form-group">
   <label for="serviceoutput">父组件服务输入：</label>
   <input type="text"
       class="form-control"
       id="serviceoutput"
       placeholder="服务输入"
       [(ngModel)]="serviceInput"
   >
  </p>
  <button class="btn btn-primary" (click)="clickService()">Service方式</button>
 </p>
</p>
<app-child></app-child>
</p>

<!--child.component.html-->
<p class="card" style="width: 500px;">
 <p class="card-header">
  子组件
 </p>
 <p class="card-body">
  <h5 class="card-title">子组件</h5>
  <p class="form-group">
   <label for="serviceoutput">子组件服务输入：</label>
   <input type="text"
       class="form-control"
       id="serviceoutput"
       placeholder="服务输入"
       [(ngModel)]="serviceInput"
   >
  </p>
  <button class="btn btn-primary" (click)="clickService()">Service方式</button>
 </p>
</p>

Der Effekt ist wie folgt:

Der Kerncode der übergeordneten und untergeordneten Komponenten ist ähnlich. Die Dienstinstanz wird im Konstruktor in sich selbst eingefügt . Die übergeordneten und untergeordneten Komponenten haben eine eindeutige ID. Unabhängig davon, ob die übergeordnete Komponente oder die untergeordnete Komponente die Methode push() aufruft, um Daten zu übertragen, können beide Parteien die Daten empfangen. Zu diesem Zeitpunkt muss anhand der ID ermittelt werden, ob die übergeordnete Komponente oder die untergeordnete Komponente die Daten verwendet. Der Kerncode lautet wie folgt:

//服务
//meditor.service.ts
import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class MeditorService {
 private subject = new Subject<MeditorMsg>();
 constructor() {}
 // 获取订阅者
 public getObservable(): Observable<MeditorMsg> {
  return this.subject.asObservable();
 }
 // 推送信息
 public push(msg: MeditorMsg) {
  this.subject.next(msg);
 }
}
// 中间者信息
export interface MeditorMsg {
 id: string;
 body: any;
}

Was ich oben geschrieben habe, ist nicht sehr vollständig, das heißt, vor dem Ende des Lebenszyklus, also im onDestroy-Zyklus, muss das Abonnement gekündigt werden.

Das Obige ist eine Zusammenfassung der Komponenteninteraktionen, die ich in letzter Zeit verwendet habe. Ich persönlich bin der Meinung, dass die Interaktion über Dienste skalierbarer ist. Unser Projekt verwendet beispielsweise eine dynamisch angezeigte Seitenleiste. Wenn Sie zu unterschiedlichen Zeiten darauf klicken, um die Seitenleiste anzuzeigen, werden unterschiedliche Dinge angezeigt. Zu diesem Zeitpunkt wird die Seitenleiste als übergeordnete Komponente verwendet und die untergeordnete Komponente als Teil der Nachricht an die übergeordnete Komponente übergeben. Die übergeordnete Komponente generiert dynamisch eine Vorlage basierend auf dem Namen der untergeordneten Komponente und zeigt sie in der Seitenleiste an . Nachdem ich so viel Unsinn geredet habe, bedeutet das folgende Bild wahrscheinlich:

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

PHP-Schließungen und anonyme Funktionen (ausführliches Tutorial)

So verwenden Sie den dreistufigen Verknüpfungsselektor im WeChat-Applet

So verwenden Sie JQuery, um den Akkordeoneffekt zu erzielen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Kommunikation zwischen Eltern-Kind-Komponenten in Angular2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!