Beispiel für die Datenkommunikation gemeinsam genutzter Angular4-Dienste in mehreren Komponenten

In diesem Artikel werden hauptsächlich Beispiele für die Datenkommunikation zwischen gemeinsam genutzten Angular4-Diensten in mehreren Komponenten vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

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. Öffentliche Dienste

import {Injectable} from "@angular/core";

@Injectable()
export class CommonService {
 public dateList: any = [
 {
  name: "张旭超",
  age: 20,
  address: "北京市朝阳区"
 }
 ];

 constructor() {

 }

 addDateFun(data) {
 this.dateList.push(data);
 }
}

2. parent.component.ts

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

<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>

4. child-one.component.ts

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 = {};
 }
}

5. child-one.component.html

<p-dialog header="弹窗" [(visible)]="display" [width]="300" appendTo="body" modal="modal">
 <form #myForm="ngForm" name="myForm">
 <p>姓名：<input type="text" name="username" [(ngModel)]="username" pInputText/></p>
 <p>年龄：<input type="number" name="age" [(ngModel)]="age" pInputText/></p>
 <p>地址：<input type="text" name="address" [(ngModel)]="address" pInputText/></p>
 <button pButton label="确定" type="submit" (click)="addInfoFun()"></button>
 <button pButton label="取消" (click)="hideDialog()"></button>
 </form>
</p-dialog>
<button label="添加" pButton (click)="showDialog()"></button>

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

Verwandte Artikel:

So verwenden Sie das leichte JS-Cookie-Plug-in js-cookie

p5.js BiDa-Implementierung Code von Grass Tree

JS-Animations-Timer-Wissenszusammenfassung

Das obige ist der detaillierte Inhalt vonBeispiel für die Datenkommunikation gemeinsam genutzter Angular4-Dienste in mehreren Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!