微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

应用场景,不同组件中操作统一组数据,不论哪个组件对数据进行了操作,其他组件中立马看到效果。这样他们就要共用一个服务实例,是本次的重点,如果不同实例,那么操作的就不是同一组数据,那么就不会有这样的效果,想实现共用服务实例,就是在所有父组件中priviates:[]中引入这个组件,子组件中不需要再次引入,那么他们都是用的父组件中的服务实例。

1、公用服务

rush:js;"> 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

rush:js;"> 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

rush:xhtml;">

4、child-one.component.ts

rush:js;"> 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

rush:xhtml;"> display" [width]="300" appendTo="body" modal="modal">
姓名:

年龄:

地址:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文地址:https://www.jb51.cc/js/32947.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐