Ausführliche Erläuterung der von angle4 geteilten Fälle der Datenkommunikation mit mehreren Komponenten

Dieses Mal werde ich Ihnen den Fall der Datenkommunikation bei der gemeinsamen Nutzung mehrerer Komponenten durch Angular4 ausführlich erläutern Schauen Sie mal rein. Anwendungsszenario: Betreiben Sie einen einheitlichen Datensatz in verschiedenen Komponenten. Unabhängig davon, welche Komponente die Daten verarbeitet, ist der Effekt sofort in anderen Komponenten sichtbar. Auf diese Weise müssen sie eine Dienstinstanz gemeinsam nutzen, worauf es in diesem Artikel ankommt. Wenn es sich um unterschiedliche Instanzen handelt, werden sie nicht mit demselben Datensatz betrieben, sodass ein solcher Effekt nicht auftritt Um eine gemeinsam genutzte Dienstinstanz zu erreichen, müssen Sie alle übergeordneten Komponenten privatisieren. Diese Komponente wird in :[] eingeführt und muss nicht erneut in der Unterkomponente eingeführt werden, dann verwenden sie alle die Dienstinstanz in der übergeordneten Komponente.

1. Öffentlicher Dienst

import {Injectable} from "@angular/core";
@Injectable()
export class CommonService {
 public dateList: any = [
 {
  name: "张旭超",
  age: 20,
  address: "北京市朝阳区"
 }
 ];
 constructor() {
 }
 addDateFun(data) {
 this.dateList.push(data);
 }
}

import {Component, OnInit} from "@angular/core";
import {CommonService} from "./common.service";
// 这里要通过父子公用服务来操作数据，只需要在父组件中引入服务。
@Component({
 selector: "parent-tag",
 templateUrl: "parent.component.html",
 providers: [
 CommonService
 ]
})
export class ParentComponent implements OnInit {
 public list: any = [];
 constructor(private commonService: CommonService) {
 this.list = commonService.dateList;
 }
 ngOnInit() {
 }
}

3. parent.component.html

4 .component.ts

<table width="500">
 <tr *ngFor="let item of list">
 <td>
  {{item.name}}
 </td>
 <td>
  {{item.age}}
 </td>
 <td>
  {{item.address}}
 </td>
 </tr>
</table>
<child-one-tag></child-one-tag>

5, child-one.component.html

import {Component} from "@angular/core";
import {CommonService} from "./common.service";
@Component({
 selector: "child-one-tag",
 templateUrl: "child-one.component.html"
})
export class ChildOneComponent {
 public display: boolean = false;
 public username: string = "";
 public age: number = 20;
 public address: string = "";
 constructor(public commonService: CommonService) {
 }
 showDialog() {
 this.display = true;
 }
 hideDialog() {
 this.display = false;
 }
 addInfoFun() {
 let params = {
  name: this.username,
  age: this.age,
  address: this.address
 };
 this.commonService.addDateFun(params);
 params = {};
 }
}

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben , und es gibt noch mehr spannende Dinge. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Eine Zusammenfassung der bidirektionalen Bindungsmethoden in Vue

Verwenden Sie Vue, um das a-Tag hervorzuheben, wenn Sie darauf klicken ( mit Code)

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der von angle4 geteilten Fälle der Datenkommunikation mit mehreren Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!