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 相关文章推荐
JQuery 写的个性导航菜单
Dec 24 Javascript
javascript的数组和常用函数详解
May 09 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
JS自定义滚动条效果
Mar 13 Javascript
纯JS实现五子棋游戏
May 28 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
vue开发简单上传图片功能
Jun 30 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
详解如何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中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
深入认识JavaScript中的函数
2007/01/22 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
js 获取、清空input type="file"的值(示例代码)
2013/12/24 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
python实现的简单文本类游戏实例
2015/04/28 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
实习老师个人总结的自我评价
2013/09/28 职场文书
教师自荐信
2013/12/10 职场文书
初中校园广播稿
2014/02/02 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
社区服务活动总结
2014/05/07 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
九年级历史教学反思
2016/02/19 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis
Python 中面向接口编程
2022/05/20 Python