Heim > Web-Frontend > js-Tutorial > Beispiel für die Datenkommunikation gemeinsam genutzter Angular4-Dienste in mehreren Komponenten

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

亚连
Freigeben: 2018-05-28 10:36:58
Original
1449 Leute haben es durchsucht

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);
 }
}
Nach dem Login kopieren

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() {

 }
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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 = {};
 }
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage