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 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
html实现随机点名器的示例代码
Apr 02 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
mysql 字段类型说明
2007/04/27 PHP
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
python Django模板的使用方法
2016/01/14 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
如何通过python实现全排列
2020/02/11 Python
python有几个版本
2020/06/17 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
单位人事专员介绍信
2014/01/11 职场文书
化学教师教学反思
2014/01/17 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
浪费资源的建议书
2014/03/12 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
先进班集体事迹材料
2014/12/25 职场文书
2015年征兵工作总结
2015/07/23 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫