angular2 组件之间通过service互相传递的实例


Posted in Javascript onSeptember 30, 2018

母组件传值给子组件

母组件通过service传值给子组件,很简单,声明一个service

@Injectable()
export class ToolbarTitleService {
 title:string;
}

然后在母组件中依赖注入

@Component({
 selector: 'admin',
 templateUrl: './admin.component.html',
 styleUrls: ['./admin.component.scss'],
 providers: [ToolbarTitleService],
})

子组件中直接声明即可使用

export class RoleListComponent implements OnInit {
 constructor(private toolbarTitleService:ToolbarTitleService) {
   console.log(this.toolbarTitleService.title);
   }
 ngOnInit() { }
}

子组件传值给母组件

那么我想反过来传值回去该怎么办,即使我在子组件注入了service,母组件也不会在我修改了servie的值之后得到通知,这时候就需要用到subscribe

service代码:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class ToolbarTitleService {
 private titleSource = new Subject();
 //获得一个Observable
 titleObservable =this.titleSource.asObservable();
 constructor() { }
 //发射数据,当调用这个方法的时候,Subject就会发射这个数据,所有订阅了这个Subject的Subscription都会接受到结果
 emitTitle(title: string) {
  this.titleSource.next(title);
 }
}

子组件代码:

import { ToolbarTitleService } from './../../common/toolbar-title.service';
import { Component, OnInit ,Output,EventEmitter} from '@angular/core';

@Component({
 selector: 'role-list',
 templateUrl: 'role-list.component.html',
 styleUrls: ['./role-list.component.css'],
 providers: [],
})

export class RoleListComponent implements OnInit {
 constructor(private toolbarTitleService:ToolbarTitleService) {
   //调用方法,发射数据
   this.toolbarTitleService.emitTitle('角色列表');
   }
 ngOnInit() { }
}

母组件:

import { Component, OnInit } from '@angular/core';
import { ToolbarTitleService } from "app/common/toolbar-title.service";
import { Subscription } from "rxjs/Subscription";

@Component({
 selector: 'admin',
 templateUrl: './admin.component.html',
 styleUrls: ['./admin.component.scss'],
 providers: [ToolbarTitleService],
})

export class AdminComponent implements OnInit {
 title: string;
 subscription: Subscription;
 constructor(private toolbarTitleService: ToolbarTitleService) {
  //使用subscribe来订阅,当数据被发射出来的时候,这里就会接收到结果
  this.subscription = this.toolbarTitleService.titleObservable.subscribe(src => console.log('得到的title:' + src));

 }

 ngOnInit() {

 }
 //销毁的时候需要取消订阅,因为订阅之后会一直处于观察者状态,不取消会导致泄露
 ngOnDestroy() {
  this.subscription.unsubscribe();
 }
}

以上这篇angular2 组件之间通过service互相传递的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS location几个方法小姐
Jul 09 Javascript
Javascript 遍历对象中的子对象
Jul 03 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
JS画线(实例代码)
Nov 20 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
详解如何webpack使用DllPlugin
Sep 30 #Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 #Javascript
vue-router 手势滑动触发返回功能
Sep 30 #Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 #Javascript
JS数组实现分类统计实例代码
Sep 30 #Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 #Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 #Javascript
You might like
php生成图片验证码-附五种验证码
2015/08/19 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
Python中几种导入模块的方式总结
2017/04/27 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
python+django+rest框架配置创建方法
2019/08/31 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
python把一个字符串切开的实例方法
2020/09/27 Python
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
工业设计毕业生自荐信
2014/04/13 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
技术股东合作协议书
2014/12/02 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis