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 { }
結果:
似乎沒有發生。
應該發生什麼:
頭組件控制檯日誌應的被擊中
使用具有可觀察性的共享服務,如https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service –
中所述。它似乎不起作用。我會在上面更新我的嘗試。似乎沒有擊中其他組件。 – AngularM
更新後,請張貼另一條評論。 –