2017-02-18 93 views
0

我正在使用Angular2,我需要讓我的服務調用另一個組件中的函數。我有1服務和1組件Angular2我需要讓我的組件調用另一個組件的功能

我有1個頭部組件需要在服務操作完成時調用。此服務操作不從頭部服務調用。

我正在使用typescript與Angular2作爲我的技術。

我需要一種方法來簡單地從我的服務中調用另一個組件中的函數。

我正在尋找類似於Angular1發射/廣播的內容。

下面的嘗試是基於關閉這個例子:https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

我嘗試:

情景 - 我需要我的服務,讓頭組件知道,當一個服務功能齊全。

服務:

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

@Injectable() 

export class TransactionService{ 
    private invokeCreditCheckEvent = new Subject<string>(); 
    invokeCreditCheckEventAnnounced$ = this.invokeCreditCheckEvent.asObservable(); 

    constructor(){ 
    } 

    createCredit =(): Promise<boolean> => { 
     return new Promise((resolve, reject) => { 

       this.invokeCreditCheckEvent.next("updateHeader"); 

       resolve(true); 

     });  
    } 


} 

組件:

import {Component} from '@angular/core'; 
import {TransactionService} from '../../../services/transactionService/transactionService'; 
import {Subscription} from 'rxjs/Subscription'; 

@Component({ 
    moduleId: module.id, 
    selector: 'HeaderCompanyComponent', 
    templateUrl: 'HeaderCompany.component.html' 
}) 

export class HeaderCompanyComponent{ 
    transactionService: TransactionService; 
    subscription: Subscription; 

    constructor(transactionService: TransactionService){ 
     this.transactionService = transactionService; 

     this.subscription = transactionService.invokeCreditCheckEventAnnounced$.subscribe(response => { 
      console.log("header hit!"); 
     }); 
    } 
} 

部件模塊:

export * from './headerCompany.component'; 

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { Component } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 

import { HeaderCompanyComponent } from './headerCompany.component'; 
import { TransactionService } from '../../../services/transactionService/transactionService'; 

@NgModule({ 
    imports: [RouterModule, CommonModule], 
    declarations: [HeaderCompanyComponent], 
    exports: [HeaderCompanyComponent], 
    providers: [TransactionService] 
}) 

export class HeaderCompanyModule { } 

結果:

似乎沒有發生。

應該發生什麼:

頭組件控制檯日誌應的被擊中

+5

使用具有可觀察性的共享服務,如https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service –

+0

中所述。它似乎不起作用。我會在上面更新我的嘗試。似乎沒有擊中其他組件。 – AngularM

+0

更新後,請張貼另一條評論。 –

回答

0

這是我想嘗試:
既然主題是觀察的一個實例,試試你的TransactionService內吸那以可觀察的形式返回您的主題

get invokeCreditCheckEventAnnounced() : Observable<string>{ 
    return this.invokeCreditCheckEvent; 
} 

還要確保發佈商和訂閱者都在使用相同的T xService實例

相關問題