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插件制作 自增长输入框实现代码
Aug 17 jQuery
js获取单选框或复选框值及操作
Dec 18 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
js创建对象的方式总结
Jan 10 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 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 socke 向指定页面提交数据
2008/07/23 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
Python实现完整的事务操作示例
2017/06/20 Python
python中reload(module)的用法示例详解
2017/09/15 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
python selenium操作cookie的实现
2020/03/18 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
平面设计自荐信
2013/10/07 职场文书
幼儿教师自我鉴定
2013/11/02 职场文书
2015年售票员工作总结
2015/04/29 职场文书
地雷战观后感
2015/06/09 职场文书
荒岛余生观后感
2015/06/09 职场文书
第一军规观后感
2015/06/12 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书