快捷導(dǎo)航

angular4 共享服務(wù)在多個(gè)組件中數(shù)據(jù)通信的示例

更新時(shí)間：2018年03月30日 11:01:17 作者：zxc19890923

本篇文章主要介紹了angular4 共享服務(wù)在多個(gè)組件中數(shù)據(jù)通信的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

應(yīng)用場(chǎng)景，不同組件中操作統(tǒng)一組數(shù)據(jù)，不論哪個(gè)組件對(duì)數(shù)據(jù)進(jìn)行了操作，其他組件中立馬看到效果。這樣他們就要共用一個(gè)服務(wù)實(shí)例，是本次的重點(diǎn)，如果不同實(shí)例，那么操作的就不是同一組數(shù)據(jù)，那么就不會(huì)有這樣的效果，想實(shí)現(xiàn)共用服務(wù)實(shí)例，就是在所有父組件中priviates:[]中引入這個(gè)組件，子組件中不需要再次引入，那么他們都是用的父組件中的服務(wù)實(shí)例。

1、公用服務(wù)

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

@Injectable()
export class CommonService {
 public dateList: any = [
 {
  name: "張旭超",
  age: 20,
  address: "北京市朝陽(yáng)區(qū)"
 }
 ];

 constructor() {

 }

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

2、parent.component.ts

import {Component, OnInit} from "@angular/core";
import {CommonService} from "./common.service";

// 這里要通過(guò)父子公用服務(wù)來(lái)操作數(shù)據(jù)，只需要在父組件中引入服務(wù)。
@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>