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和DOM Interfaces来处理HTML
Oct 09 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
Vue实现购物车功能
Apr 27 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
微信小程序签到功能
Oct 31 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
教你一步步实现一个简易promise
Nov 02 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
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
python批量修改图片大小的方法
2018/07/24 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
python制作微博图片爬取工具
2021/01/16 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
新闻学毕业生自荐信
2013/11/15 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
自荐信怎么写
2015/03/04 职场文书
党员转正大会主持词
2015/07/02 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
获奖感言范文
2015/07/31 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js