Angular父子组件通过服务传参的示例方法


Posted in Javascript onOctober 31, 2018

今天在使用ngx-translate做多语言的时候遇到了一个问题,需要在登录页面点击按钮,然后调用父组件中的一个方法。
一开始想到了@input和@output,然而由于并不是单纯的父子组件关系,而是包含路由的父子组件关系,所以并不能使用@input方法和@output方法。

然后去搜索一下,发现stackoverflow上有答案,用的是service来进行传参,发现很好用,所以和大家分享一下。

首先,创建一个service.

shared-service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class SharedService {
 // Observable string sources
 private emitChangeSource = new Subject<any>();
 // Observable string streams
 changeEmitted$ = this.emitChangeSource.asObservable();
 // Service message commands
 emitChange(change: any) {
 this.emitChangeSource.next(change);
 }
}

然后把这个service分别注入父组件和子组件所属的module中,记得要放在providers里面。

然后把service再引入到父子组件各自的component里面。

子组件通过onClick方法传递参数:

child.component.ts

import { Component} from '@angular/core';
@Component({
 templateUrl: 'child.html',
 styleUrls: ['child.scss']
})
export class ChildComponent {
 constructor(
 private _sharedService: SharedService
 ) { }
onClick(){
 this._sharedService.emitChange('Data from child');
 }
}

父组件通过服务接收参数:

parent.component.ts

import { Component} from '@angular/core';
@Component({
 templateUrl: 'parent.html',
 styleUrls: ['parent.scss']
})
export class ParentComponent {
 constructor(
 private _sharedService: SharedService
 ) {
 _sharedService.changeEmitted$.subscribe(
 text => {
 console.log(text);
 });
 }
}

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

Javascript 相关文章推荐
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
jQuery 操作option的实现代码
Mar 03 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
requireJS使用指南
Apr 27 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 #Javascript
微信小程序实现留言功能
Oct 31 #Javascript
微信小程序签到功能
Oct 31 #Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 #Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 #Javascript
微信小程序实现签到功能
Oct 31 #Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 #Javascript
You might like
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
javascript关于继承解析
2016/05/10 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
vue的滚动条插件实现代码
2019/09/07 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
Python编程中NotImplementedError的使用方法
2018/04/21 Python
python中p-value的实现方式
2019/12/16 Python
dpn网络的pytorch实现方式
2020/01/14 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
如何设置Java的运行环境
2013/04/05 面试题
办公室内勤岗位职责范本
2013/12/09 职场文书
节约用水的口号
2014/06/20 职场文书
2014财务年终工作总结
2014/12/08 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
食品安全责任书范本
2015/05/09 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python