Angular6：订阅组件服务事件

Question

我需要根据服务器响应状态更改组件中的消息 txt。问题是我不知道如何在我的组件 ts 文件中监听该事件并调用其中声明的函数。也许有一些更好的方法来显示此类通知

处理错误 ts:

  catchErrors(resp:any) {
    if (resp.status == 200) {
      this.message = 'Запрос выполнен успешною Код: ' + resp.status;
    }
    else if (resp.status == 400) {
      this.message = 'Неверный запрос. Код ошибки: ' + status;
    }
    else if (resp.status == 404) {
      this.message = 'Сущность не найдена в системе. Код ошибки: ' + status;
    }
    else if (resp.status == 500) {
      this.message = 'Ошибка сервера. Код ошибки: ' + status;
    }
return this.messageService.showMessage(this.message);
  }

消息服务 ts :

  showMessage(message) {
    return this.message = message;
  }

而且我每次从服务器收到响应时都需要运行这个函数。它在 messages.component.ts:

   showNotification() {
    this.message = this.messageService.message;
  }

Answer 1

您可以使用主题来完成这项工作：

在你的 message.service.ts 声明一个 Subject :

messageSubject : Subject<string> = new Subject<string>();

在 showMessage() 内：

showMessage(message) {
    this.messageSubject.next(message);
 }

然后在 component 中，在 ngOnInit() 中，像这样订阅 messageSubject ：

this.messageService.messageSubject.subscribe((message : string) => {

//your message will be available here as ``message`` and you can implement your notification logic using this message 
})

Answer 2

好吧，您可以在 MessageService 中创建一个 private BehaviorSubject<string>，然后使用 asObservable 将其公开为 public Observable ].

您还可以在此服务上创建一个 setMessage 方法，以便它可以将新消息推送到 private BehaviorSubject<string> 创建的流中。

这可以被 handleHandler 使用。

然后你可以简单地 subscribe 到你的 MessageService.

暴露的 public Observable

这在代码中看起来像这样：

消息服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable()
export class MessageService {

  private message: BehaviorSubject<string> = new BehaviorSubject<string>(null);
  public message$: Observable<string> = this.message.asObservable();

  constructor(private http: HttpClient) { }

  getData() {
    this.http.get('https://jsonplaceholder.typicode.comm/users')
      .subscribe(
        res => console.log(res),
        err => this.errorHandler(err)
      );
  }

  setMessage(newMessage) {
    this.message.next(newMessage);
  }

  private errorHandler(error) {
    this.message.next('Got an error')
  }
}

组件：

import { Component } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  message;

  constructor(private messageService: MessageService) {}

  ngOnInit() {
    this.messageService.message$.subscribe(message => this.message = message);
    this.messageService.getData();
  }
}

模板：

<p>Message from the Message Service: {{ message }}</p>

这里只有一个问题：

您不能为错误处理创建另一个服务，因为您的错误处理程序服务将依赖于您的消息服务，反之亦然。这将创建所谓的循环依赖，从而引发错误。

这里有一个 Sample StackBlitz 供您参考。

Angular6：订阅组件服务事件

Angular 6: subscribe component to a service event

javascript

typescript2.0

angular