angular2 組件之間通過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() { }
}

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class ToolbarTitleService {
 private titleSource = new Subject();
 //獲得一個Observable
 titleObservable =this.titleSource.asObservable();
 constructor() { }
 //發(fā)射數(shù)據，當調用這個方法的時候，Subject就會發(fā)射這個數(shù)據，所有訂閱了這個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) {
 //調用方法，發(fā)射數(shù)據
 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來訂閱，當數(shù)據被發(fā)射出來的時候,這里就會接收到結果
 this.subscription = this.toolbarTitleService.titleObservable.subscribe(src => console.log('得到的title:' + src));

 }

 ngOnInit() {

 }
 //銷毀的時候需要取消訂閱，因為訂閱之后會一直處于觀察者狀態(tài),不取消會導致泄露
 ngOnDestroy() {
 this.subscription.unsubscribe();
 }
}