日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

這篇文章主要介紹angular2 組件之間如何通過(guò)service互相傳遞，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司始終堅(jiān)持【策劃先行，效果至上】的經(jīng)營(yíng)理念，通過(guò)多達(dá)10多年累計(jì)超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的全網(wǎng)整合營(yíng)銷推廣解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：白烏魚(yú)等企業(yè)，備受客戶表?yè)P(yáng)。

母組件傳值給子組件

母組件通過(guò)service傳值給子組件，很簡(jiǎn)單，聲明一個(gè)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() { }
}

子組件傳值給母組件

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

service代碼：

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

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

 }

 ngOnInit() {

 }
 //銷毀的時(shí)候需要取消訂閱，因?yàn)橛嗛喼髸?huì)一直處于觀察者狀態(tài),不取消會(huì)導(dǎo)致泄露
 ngOnDestroy() {
  this.subscription.unsubscribe();
 }
}

以上是“angular2 組件之間如何通過(guò)service互相傳遞”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)標(biāo)題：angular2組件之間如何通過(guò)service互相傳遞-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://www.dlmjj.cn/article/dggjhc.html