angular4 共享服务在多个组件中数据通信的示例

angular4 共享服务在多个组件中数据通信的示例

应用场景，不同组件中操作统一组数据，不论哪个组件对数据进行了操作，其他组件中立马看到效果。这样他们就要共用一个服务实例，是本次的重点，如果不同实例，那么操作的就不是同一组数据，那么就不会有这样的效果，想实现共用服ePIqUgXIK务实例，就是在所有父组件中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 commePIqUgXIKonService: CommonService) {

this.list = commonService.dateList;

}

ngOnInit() {

}

}

3、parent.component.html

{{item.name}}

{{item.age}}

{{item.address}}

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 dishttp://play: 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

姓名：

年龄：

地址：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。