anguar4 共用服務在多個組件中資料通訊

應用情境，不同組件中操作統一組資料，不論哪個組件對資料進行了操作，其他組件中立馬看到效果。這樣他們就要共用一個服務執行個體，是本次的重點，如果不同執行個體，那麼操作的就不是同一組資料，那麼就不會有這樣的效果，想實現共用服務執行個體，就是在所有父組件中priviates:[]中引入這個組件，子組件中不需要再次引入，那麼他們都是用的父組件中的服務執行個體。

1、公用服務

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>

應用情境，不同組件中操作統一組資料，不論哪個組件對資料進行了操作，其他組件中立馬看到效果。這樣他們就要共用一個服務執行個體，是本次的重點，如果不同執行個體，那麼操作的就不是同一組資料，那麼就不會有這樣的效果，想實現共用服務執行個體，就是在所有父組件中priviates:[]中引入這個組件，子組件中不需要再次引入，那麼他們都是用的父組件中的服務執行個體。

1、公用服務

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>