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代码
Dec 01 Javascript
JavaScript 继承详解(三)
Jul 13 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
浅析PHP水印技术
2007/02/14 PHP
php 生成随机验证码图片代码
2010/02/08 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
PHP插入排序实现代码
2013/04/04 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
PHP实现变色验证码实例
2014/01/06 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
Python中自定义函数的教程
2015/04/27 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
python中数字是否为可变类型
2020/07/08 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
2015年企业新年寄语
2014/12/08 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
秦兵马俑导游词
2015/02/02 职场文书
硕士学位申请报告
2015/05/15 职场文书