anguar4 共享服务在多个组件中数据通信

大佬教程收集整理的这篇文章主要介绍了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>

大佬总结

以上是大佬教程为你收集整理的anguar4 共享服务在多个组件中数据通信全部内容，希望文章能够帮你解决anguar4 共享服务在多个组件中数据通信所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。