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


Posted in Javascript onMarch 30, 2018

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
jQuery手风琴的简单制作
May 12 jQuery
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
js将键值对字符串转为json字符串的方法
Mar 30 #Javascript
webpack4.0打包优化策略整理小结
Mar 30 #Javascript
Angular4学习笔记router的简单使用
Mar 30 #Javascript
vue.js中created方法作用
Mar 30 #Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 #Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 #Javascript
Vue实现导出excel表格功能
Mar 30 #Javascript
You might like
PHP获取音频文件的相关信息
2015/06/22 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
物理系毕业生自荐书范文
2014/02/22 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
十佳护士先进事迹
2014/05/08 职场文书
安全责任书范文
2014/08/25 职场文书
体育教师教学随笔
2015/08/15 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
小学英语课教学反思
2016/02/15 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
MySQL窗口函数的具体使用
2021/11/17 MySQL