Question

我使用Angular2，我需要让我的服务来调用另一个组件中的函数。

我有 1个服务和1个组件。

我有1个标头组件，需要在服务操作完成时调用。不会从标头服务调用此服务操作。

我使用带有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 { }

结果：

似乎没有发生任何事情。

会发生什么：

标题组件控制台日志应该被点击

Answer 1

这是我会尝试的：
由于Subject是可观察的实例，因此在TransactionService中尝试一个getter，它将您的主题作为可观察的对象返回

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

还要确保发布者和订阅者都在同一个TxService实例

Angular2我需要让我的组件在另一个组件中调用一个函数

1 个答案: