ANGUAR4 Shared Services data communication in multiple components

Application scenarios, operations of the unified Group data in different components, no matter which component is working on the data, immediately see the effect in other components. So they will share a service instance, is the focus of this time, if the different instances, then the operation is not the same set of data, then there will be no such effect, want to implement a common service instance, is in all parent components priviates:[] introduced this component, sub-components do not need to be introduced again, Then they are all using the service instance in the parent component.

1. Public service

Import {injectable} from "@angular/core", @Injectable () export class Commonservice {public    datelist:any = [        {
  name: "Zhang Xu",            age:20,            address: "Chaoyang District, Beijing"        }    ];    Constructor () {    }    adddatefun (data) {        this.dateList.push (data);}    }

2, Parent.component.ts

Import {Component, OnInit} from ' @angular/core ', import {commonservice} from "./common.service";//The data is to be manipulated through a parent-child public service. You only need to introduce services in the parent component. @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= ">    <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 =;    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= "Popup" [(Visible)]= "display" [width]= "appendto=" Body "modal=" modal ">    <form #myForm = "Ngform" name= "MyForm" >        <p> Name: <input type= "text" name= "username" [(ngmodel)]= "username" pinputtext/ ></p>        <p> Age: <input type= "number" name= "aged" [(Ngmodel)]= "ages" pinputtext/></p>        <p> Address: <input type= "text" name= "Address" [(Ngmodel)]= "Address" pinputtext/></p>        <button Pbutton label= "OK" type= "Submit" (click) = "Addinfofun ()" ></button>        <button pbutton label= "Cancel" (click) = "Hidedialog ()" ></button>    </form></p-dialog><button label= "Add" Pbutton (click) = " ShowDialog () "></button>

Application scenarios, operations of the unified Group data in different components, no matter which component is working on the data, immediately see the effect in other components. So they will share a service instance, is the focus of this time, if the different instances, then the operation is not the same set of data, then there will be no such effect, want to implement a common service instance, is in all parent components priviates:[] introduced this component, sub-components do not need to be introduced again, Then they are all using the service instance in the parent component.

1. Public service

Import {injectable} from "@angular/core", @Injectable () export class Commonservice {public    datelist:any = [        {
  name: "Zhang Xu",            age:20,            address: "Chaoyang District, Beijing"        }    ];    Constructor () {    }    adddatefun (data) {        this.dateList.push (data);}    }

2, Parent.component.ts

Import {Component, OnInit} from ' @angular/core ', import {commonservice} from "./common.service";//The data is to be manipulated through a parent-child public service. You only need to introduce services in the parent component. @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= ">    <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 =;    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= "Popup" [(Visible)]= "display" [width]= "appendto=" Body "modal=" modal ">    <form #myForm = "Ngform" name= "MyForm" >        <p> Name: <input type= "text" name= "username" [(ngmodel)]= "username" pinputtext/ ></p>        <p> Age: <input type= "number" name= "aged" [(Ngmodel)]= "ages" pinputtext/></p>        <p> Address: <input type= "text" name= "Address" [(Ngmodel)]= "Address" pinputtext/></p>        <button Pbutton label= "OK" type= "Submit" (click) = "Addinfofun ()" ></button>        <button pbutton label= "Cancel" (click) = "Hidedialog ()" ></button>    </form></p-dialog><button label= "Add" Pbutton (click) = " ShowDialog () "></button>