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 相关文章推荐
js null,undefined,字符串小结
Aug 21 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
express启用https使用小记
May 21 Javascript
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中用正则表达式清除字符串的空白
2011/01/17 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
Maps Javascript
2007/01/22 Javascript
js 替换
2008/02/19 Javascript
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
python单例模式实例分析
2015/04/08 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
《胡杨》教学反思
2014/02/16 职场文书
作风整顿剖析材料
2014/09/30 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
行政助理岗位职责
2015/02/10 职场文书
毕业生个人自荐书
2015/03/05 职场文书
计划生育目标责任书
2015/05/09 职场文书
盗窃案辩护词
2015/05/21 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
学校就业保障协议书
2019/06/24 职场文书