多个组件中进行数据通信angular4

这次给大家带来多个组件中进行数据通信angular4，使用多个组件中进行数据通信angular4的注意事项有哪些，下面就是实战案例，一起来看一下。

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

 

 

  {{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 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

 

 
姓名：
 
年龄：
 
地址：
 
 
 

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

行业贸易网站管理系统 2007 Beta 1

1.修正BUG站用资源问题,优化程序2.增加关键词搜索3.修改报价4.修正BUG 水印问题5.修改上传方式6.彻底整合论坛,实现一站通7.彻底解决群发垃圾信息问题。注册会员等发垃圾邮件7.彻底解决数据库安全9.修改交易方式.增加网站担保,和直接交易两中10.全站可选生成html.和单独新闻生成html(需要装组建)11. 网站有10中颜色选择适合不同的行业不同的颜色12.修改竞价格排名方式13.修

下载

JS+Canva做出预览压缩和上传图片功能

js怎么存储键值