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 相关文章推荐
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
微信小程序实现简单表格
Feb 14 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
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文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
js 窗口抖动示例
2013/09/04 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
python简单实现刷新智联简历
2016/03/30 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
Python数据结构之单链表详解
2017/09/12 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
python制作mysql数据迁移脚本
2019/01/01 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
荷兰手表网站:Watch2Day
2018/07/02 全球购物
护士自荐信范文
2013/12/15 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
农业项目建议书
2014/08/25 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书