angular4 共享服务在多个组件中数据通信的示例
时间:2019-04-13
本文章向大家介绍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
<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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Centos7.2/7.3集群安装Kubernetes 1.8.4 + Dashboard
- PsySH——PHP交互式控制台
- 如何将 Text, XML, CSV 数据文件导入 MySQL
- hpv病毒基因研究调研
- 从0到1构建美团压测工具
- sqoop数据导入总结
- GATK best practice每个步骤耗时如何?
- cordova学习一 环境搭建
- ChIP-seq实战分析
- PHP中9大缓存技术总结
- servlet中request等中文乱码问题
- Ofbiz模块加载机制即创建独立模块(脱离热部署)
- ofbiz连接mysql并创建独立数据库
- Angular+servlet java实现前后端数据交互
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- tensorflow 使用CPU而不使用GPU的问题解决
- Python图像灰度变换及图像数组操作
- 典型算法的Python实现
- Spring是如何解决循环依赖的
- Python将两个列表转换为字典
- 三、基于promise封装属于自己的Ajax库
- 数据分析 常见异常及解决办法(一)
- Python数据分析实战(2)使用Pandas进行数据分析
- 【redis】redis内存管理、淘汰机制、内存优化
- 如何防止网站被扒的解决方法!
- 【python-面试题53-循环排序】寻找缺失的数
- 【python-leetcode42-区间合并】区间列表的交集
- 【python-leetcode202-快慢指针】快乐数
- vuejs之结合使用vue+element-ui搭建后台管理页面
- 【python-leetcode142-快慢指针】环形链表2