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 相关文章推荐
改写一个简单的菜单 弹性大小
Dec 02 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
优雅的处理vue项目异常实战记录
Jun 05 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
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
6种php上传图片重命名的方法实例
2013/11/04 PHP
php多任务程序实例解析
2014/07/19 PHP
php无限级分类实现方法分析
2016/10/19 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
python 制作网站小说下载器
2021/02/20 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
成语的广告词
2014/03/19 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
中秋节主持词
2014/04/02 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
庆祝教师节主持词
2015/07/06 职场文书
高中运动会前导词
2015/07/20 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL