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的修改当前TAB显示标题的代码
Dec 11 Javascript
$.format,jquery.format 使用说明
Jul 13 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
JavaScript中函数(Function)的apply与call理解
Jul 08 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
javascript中this指向详解
Apr 23 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 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
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
php中Ctype函数用法详解
2014/12/09 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
python删除列表中重复记录的方法
2015/04/28 Python
python基于multiprocessing的多进程创建方法
2015/06/04 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
高中生的自我评价
2014/03/04 职场文书
师德师风演讲稿
2014/05/05 职场文书
计算机专业自荐信
2014/05/24 职场文书
解除劳动合同协议书
2014/09/17 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
小学生成绩单评语
2014/12/31 职场文书
初中数学教学随笔
2015/08/15 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
python内置进制转换函数的操作
2021/06/02 Python
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python