Angular父子组件通过服务传参的示例方法

 更新时间:2018年10月31日 15:12:29   作者:前端攻城小牛  
这篇文章主要介绍了Angular父子组件通过服务传参的示例方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

今天在使用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);
 });
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • AngularJS HTML编译器介绍

    AngularJS HTML编译器介绍

    这篇文章主要介绍了AngularJS HTML编译器介绍,AngularJS的HTML编译器能让浏览器识别新的HTML语法。它能让你将行为关联到HTML元素或者属性上,甚至能让你创造具有自定义行为的新元素,需要的朋友可以参考下
    2014-12-12
  • Angular.js ng-file-upload结合springMVC的使用教程

    Angular.js ng-file-upload结合springMVC的使用教程

    这篇文章主要给大家介绍了关于Angular.js文件上传控件ng-file-upload结合springMVC的使用教程,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • Angular 2父子组件数据传递之@ViewChild获取子组件详解

    Angular 2父子组件数据传递之@ViewChild获取子组件详解

    这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@ViewChild获取子组件的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • Angular在模板驱动表单中自定义校验器的方法

    Angular在模板驱动表单中自定义校验器的方法

    本章介绍的是如何对模板驱动表单创建自定义校验器,它相比较响应式表单自定义校验器略为复杂一些。接下来通过本文给大家分享Angular在模板驱动表单中自定义校验器的方法,感兴趣的朋友一起看看吧
    2017-08-08
  • Angularjs 事件指令详细整理

    Angularjs 事件指令详细整理

    这篇文章主要介绍了Angularjs 事件指令详细整理的相关资料,这里对AngularJS 的所有的事件指令一一做出详细介绍,需要的朋友可以参考下
    2017-07-07
  • AngularJs表单验证实例详解

    AngularJs表单验证实例详解

    这篇文章主要介绍了用AngularJs验证表单实例详解的相关资料,需要的朋友可以参考下
    2016-05-05
  • AngularJS ng-repeat数组有重复值的解决方法

    AngularJS ng-repeat数组有重复值的解决方法

    不知道大家是否遇到过这个问题,在当Angular.JS ng-repeat数组中有重复项时,系统就会抛出异常,这是该怎么做?本文通过示例代码介绍了详细的解决方法,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-10-10
  • angularJS Provider、factory、service详解及实例代码

    angularJS Provider、factory、service详解及实例代码

    这篇文章主要介绍了angularJS Provider详解及实例代码的相关资料,需要的朋友可以参考下
    2016-09-09
  • AngularJS入门教程之控制器详解

    AngularJS入门教程之控制器详解

    本文主要介绍 AngularJS控制器,这里对 AngularJS控制器的知识详细讲解,并提供实例代码有需要的小伙伴可以参考下
    2016-07-07
  • AngularJS 避繁就简的路由

    AngularJS 避繁就简的路由

    这篇文章主要为大家详细介绍了AngularJS 避繁就简的路由的相关资料,感兴趣的小伙伴们可以参考一下
    2016-07-07

最新评论