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 获取当前时间戳的代码
Aug 05 Javascript
读jQuery之十 事件模块概述
Jun 27 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
使用canvas进行图像编辑的实例
Aug 29 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
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 var_export与var_dump 输出的不同
2013/08/09 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
面包屑导航详解
2017/12/07 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
Python中的闭包总结
2014/09/18 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
Python 多核并行计算的示例代码
2017/11/07 Python
python进行文件对比的方法
2018/12/24 Python
python实现字符串加密成纯数字
2019/03/19 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
Python的log日志功能及设置方法
2019/07/11 Python
Python对列表的操作知识点详解
2019/08/20 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
计算机开发个人求职信范文
2013/09/26 职场文书
借款协议书
2014/04/12 职场文书
党员创先争优活动总结
2014/05/04 职场文书
人力资源求职信
2014/05/25 职场文书
幸福家庭标语
2014/06/27 职场文书
网络研修心得体会
2016/01/08 职场文书
党员反邪教心得体会
2016/01/15 职场文书
Win11快速关闭所有广告推荐
2022/04/19 数码科技