时间:2021-07-01 10:21:17 帮助过:4人阅读
应用场景,不同组件中操作统一组数据,不论哪个组件对数据进行了操作,其他组件中立马看到效果。这样他们就要共用一个服务实例,是本次的重点,如果不同实例,那么操作的就不是同一组数据,那么就不会有这样的效果,想实现共用服务实例,就是在所有父组件中priviates:[]中引入这个组件,子组件中不需要再次引入,那么他们都是用的父组件中的服务实例。
1、公用服务
2、parent.component.ts
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
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>
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
轻量级JS Cookie插件js-cookie的使用方法
p5.js 毕达哥拉斯树的实现代码
JS动画定时器知识总结
以上就是angular4 共享服务在多个组件中数据通信的示例的详细内容,更多请关注Gxl网其它相关文章!