服务通知的组件

Question

我有一个与第三方服务通信的服务。该服务由应用程序中的多个组件执行。我希望在服务失败时在通用通知组件中收到通知（"DoSomethingWhenFails" 函数）。目前，通用通知组件在 app.component 中被引用，服务被注入该组件。

我想到了像 eventEmitter 这样的东西，它会在服务中发出，但是我不熟悉这种服务注入时的模式。最好的方法是什么？看我的代码：

app.component.html:

<notify #messageBox ></notify>

The component:

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
export class AppComponent  {

@ViewChild('messageBox') messageBox : notify;

constructor(private someService: SomeService )

the generic notification component:

export class notification 
{
  ShowNotificationWhenTheServiceFails()
  {
    DoSomethig();
  }
}

The Service:

@Injectable({
  providedIn: 'root'
})


export class Service{

doSomething(): Observable<any> {
return this.http.get<AA>(URL, options).pipe(
     connectToThirdPArtyService();
  }),
   DoSomethingWhenFails();
  );
}

Answer 1

您可以使用行为主题来执行此操作。

service.ts

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

@Injectable()
export class DataService {

private messageSource = new BehaviorSubject('0');
currentMessage = this.messageSource.asObservable();

constructor() { }

changeNotification(number) {
this.messageSource.next(number)
}

}

parent.component.ts（您的案例中的通知组件）

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-parent',
  template: `
    {{message}}
  `,
  styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.changeNotification.subscribe(number => this.number = number)
  }

}

当出现故障时，您可以推送到行为主题，例如，

constructor(private data: DataService) { }

 onFailure() {
    this.data.changeNotification("1")
  }

您可以在服务级别有一个数字并在失败时增加它并推送它或以任何希望的方式推送。

Answer 2

您应该使用 rxjs Subject 在服务调用中发生错误时发出值。你应该调用 next() 方法。

@Injectable({
  providedIn: 'root'
})
export class Service{
  public notify$ = new Subject<any>();
  doSomething(): Observable<any> {
  return this.http.get<AA>(URL, options).pipe(
     connectToThirdPArtyService();
  }),
   this.notify$.next(true);
  );
}

在您的组件中，您应该使用 subscribe 方法按如下方式收听 notify$ 主题，每当使用 next 方法发出一个值时，您的组件中的 subscribe 方法就会被调用，您可以在 notify$ 订阅

中做一些事情

export class notification implements OnInit {

  constructor(public service:Service) { }

  ngOnInit() {
    this.service.notify$.subscribe(messages => {  DoSomethig(); });
  }

}

服务通知的组件

Component being notified by a service

angular-services

angular2-observables

angular