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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
分页栏的web标准实现
Nov 01 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
浅谈React碰到v-if
Nov 04 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 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
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
浅谈Python的异常处理
2016/06/19 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
Python csv文件记录流程代码解析
2020/07/16 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
Python 日期与时间转换的方法
2020/08/01 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
事业单位分类改革实施方案
2014/03/21 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
纪律教育月活动总结
2014/08/26 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
导游词之青岛崂山
2019/12/27 职场文书
python unittest单元测试的步骤分析
2021/08/02 Python