服务通知组件

时间:2019-03-05 04:58:54

标签: angular angular-services angular2-observables

我有可以与第三方服务通信的服务。 该服务由应用程序中的多个组件执行。每当服务失败时,我都希望在通用通知组件中得到通知(“ DoSomethingWhenFails”功能)。 当前,通用通知组件在app.component中被引用,服务被注入到该组件中。

我想到了诸如eventEmitter之类的东西会在服务中发出,但是当注入服务时,我对这种模式并不熟悉。 最好的方法是什么?查看我的代码:

  

app.component.html:

<notify #messageBox ></notify>
  

组件:

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

@ViewChild('messageBox') messageBox : notify;

constructor(private someService: SomeService ) 
  

通用通知组件:

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

服务:

@Injectable({
  providedIn: 'root'
})


export class Service{

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

2 个答案:

答案 0 :(得分:2)

您可以使用行为主体来做到这一点。

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")
  }

您可以在服务级别获得一个号码,并在出现故障时将其递增,然后以任何希望的方式推送它。

答案 1 :(得分:1)

只要服务调用中发生错误,就应该使用rxjs |-A |---sub1 |-----a |-----b |---sub2 |-----a |-----b |-B |---sub1 |-----a |-----b |---sub2 |-----a |-----b |-C |---sub2 |-----a |-----b |-ipp2 |---log 发出值。您应该调用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); ); } 方法来按如下方式监听notify $主题,每当使用subscribe方法发出一个值时,就会调用您组件中的subscription方法,可以在next订阅中做某事

notify$