应用场景，不同组件中操作统一组数据，不论哪个组件对数据进行了操作，其他组件中立马看到效果。这样他们就要共用一个服务实例，是本次的重点，如果不同实例，那么操作的就不是同一组数据，那么就不会有这样的效果，想实现共用服务实例，就是在所有父组件中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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery可见性过滤器使用案例详解
使用jquery内容过滤器方法详解
以上就是angular4多个组件相互数据通信的详细内容。