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 相关文章推荐
js 文件引入实现代码
Apr 23 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
node.js通过url读取文件
Oct 16 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
JavaScript如何操作css
Oct 24 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生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
PHP链表操作简单示例
2016/10/15 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
基于jquery的超简单上下翻
2010/04/20 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
js new Date()实例测试
2019/10/31 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
通过C++学习Python
2015/01/20 Python
python编程开发之类型转换convert实例分析
2015/11/13 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
工程师自我评价怎么写
2013/09/19 职场文书
超市营业员岗位职责
2013/12/20 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
责任担保书范文
2014/05/21 职场文书
创文明城市标语
2014/06/16 职场文书
校外活动方案
2014/08/28 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
导游词之广西漓江
2019/11/02 职场文书
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技