Angular父子组件通过服务传参的示例方法
2018-10-31 15:12
2456 查看
今天在使用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); }); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Angular2父子组件之间数据传递:父子组件共享服务通信
- Angular5.0 子组件通过service传递值给父组件的方法
- Oracle通过递归查询父子兄弟节点方法示例
- Vue通过ref父子组件拿值方法
- Angular2父子组件之间数据传递:父子组件共享服务通信
- Angular 封装并发布组件的方法示例
- Angular 2父子组件之间共享服务通信的实现
- Angular使用动态加载组件方法实现Dialog的示例
- angular6.0使用教程之父组件通过url传递id给子组件的方法
- Angular2父子组件之间数据传递:@Input和@Output (下)
- Java通过正则表达式获取字符串中数字的方法示例
- JAVA通过JNI调用C#dll方法说明(包含示例)
- 通过三种方法为apt-get设置http代理服务
- Vue 父子组件的数据传递、修改和更新方法
- 通过bindservice调用服务内部方法
- vue.js父组件使用外部对象的方法示例
- Vue父子模版传值及组件传值的三种方法
- 浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
- Angular 2父子组件数据传递之@Input和@Output详解 (上)
- ASP.NET 中通过Form身份验证 来模拟Windows 域服务身份验证的方法