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 相关文章推荐
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
angular多语言配置详解
May 16 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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教程孙仲岳主讲
2008/01/07 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
如何利用Python写个坦克大战
2020/11/18 Python
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
家长写给老师的建议书
2014/03/13 职场文书
洗车工岗位职责
2014/03/15 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
团拜会策划方案
2014/06/07 职场文书
商场促销活动策划方案
2014/08/18 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
应急管理工作总结2015
2015/05/04 职场文书
2015选调生工作总结
2015/07/24 职场文书
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python