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扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
JavaScript实现消消乐的源代码
Jan 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
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
如何实现JS函数的重载
2006/09/22 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
Python json转字典字符方法实例解析
2020/04/13 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
大专自我鉴定范文
2013/10/01 职场文书
幼儿园园长岗位职责
2013/11/26 职场文书
代理班主任的自我评价
2014/02/04 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
学习决心书
2014/03/11 职场文书
2014年公务员工作总结
2014/11/18 职场文书
2014年民政工作总结
2014/11/26 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏