母組件傳值給子組件

母組件通過service傳值給子組件，很簡單，聲明一個service

@Injectable()export class ToolbarTitleService { title:string;}

然后在母組件中依賴注入

@Component({ selector: 'admin', templateUrl: './admin.component.html', styleUrls: ['./admin.component.scss'], providers: [ToolbarTitleService],})

子組件中直接聲明即可使用

export class RoleListComponent implements OnInit { constructor(private toolbarTitleService:ToolbarTitleService) {   console.log(this.toolbarTitleService.title);   } ngOnInit() { }}

子組件傳值給母組件

那么我想反過來傳值回去該怎么辦，即使我在子組件注入了service，母組件也不會在我修改了servie的值之后得到通知，這時候就需要用到subscribe

service代碼：

import { Injectable } from '@angular/core';import { Subject } from 'rxjs/Subject';@Injectable()export class ToolbarTitleService { private titleSource = new Subject(); //獲得一個Observable titleObservable =this.titleSource.asObservable(); constructor() { } //發射數據，當調用這個方法的時候，Subject就會發射這個數據，所有訂閱了這個Subject的Subscription都會接受到結果 emitTitle(title: string) {  this.titleSource.next(title); }}

子組件代碼：

import { ToolbarTitleService } from './../../common/toolbar-title.service';import { Component, OnInit ,Output,EventEmitter} from '@angular/core';@Component({ selector: 'role-list', templateUrl: 'role-list.component.html', styleUrls: ['./role-list.component.css'], providers: [],})export class RoleListComponent implements OnInit { constructor(private toolbarTitleService:ToolbarTitleService) {   //調用方法，發射數據   this.toolbarTitleService.emitTitle('角色列表');   } ngOnInit() { }}

母組件:

import { Component, OnInit } from '@angular/core';import { ToolbarTitleService } from "app/common/toolbar-title.service";import { Subscription } from "rxjs/Subscription";@Component({ selector: 'admin', templateUrl: './admin.component.html', styleUrls: ['./admin.component.scss'], providers: [ToolbarTitleService],})export class AdminComponent implements OnInit { title: string; subscription: Subscription; constructor(private toolbarTitleService: ToolbarTitleService) {  //使用subscribe來訂閱，當數據被發射出來的時候,這里就會接收到結果  this.subscription = this.toolbarTitleService.titleObservable.subscribe(src => console.log('得到的title:' + src)); } ngOnInit() { } //銷毀的時候需要取消訂閱，因為訂閱之后會一直處于觀察者狀態,不取消會導致泄露 ngOnDestroy() {  this.subscription.unsubscribe(); }}

以上這篇angular2 組件之間通過service互相傳遞的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。