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

好吧，您可以在private中创建BehaviorSubject<string> MessageService，并使用public将其公开为Observable asObservable。

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

然后handleHandler可以使用它。

然后您可以简单地subscribe到public暴露的Observable MessageService。

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

MessageService：

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。

Angular 6：订阅组件到服务事件

2 个答案: