使用 Angular 中的主题通过服务向组件发送数据

Question

我有一个组件显示几秒钟的消息，我的问题是我无法订阅服务并执行必要的操作，怎么办？

这是一个简短的例子，我想在项目的所有阶段调用消息组件，我该怎么做？

homeComponent.ts:

    export class HomeComponent  {
      constractor(privat _service:IHomeService){}
      getMessage(){
        this._service.get();
      }
    }

homeComponent.html：

<p (click)="getMessage()">
 show Message 
</p>

homeService.ts：

@Injectable()
export class HomeService {
  openMessage=new Subject<string>();
  get() {
    setTimeout(()=>{
      this.openMessage.next("test")
    },1000)
  }
}

messageComponent.ts：

export class MessageComponent  {
  constructor(private _service:HomeService){
    this._service.openMessage.subscribe((res)=>{
      this.name=res;
      this.flag=true;
      setTimeout(()=>{
        this.flag=false;
      },4000)
    })
  }
  name = '';
  flag:boolean=false
}

messageComponent.html：

<p [ngStyle]="flag?'display:block':'display:none'">
  {{name}}
</p>

我认为这不会发生，因为未加载消息组件 如何将其加载到服务中？

Answer 1

你在哪里加载 messageComponent？

homeComponent.html:
    <p (click)="getMessage()">
     show Message  // if you loading message component here then you should use message component's selector here
    </p> 

Answer 2

您不会“加载”服务中的组件，Angular 存储逻辑中的服务，它们不会消耗组件。

如果MessageComponent 负责在 UI 中显示消息，那么您只需在模板中使用它即可。假设它的选择器是message-component，您可以将其添加到您的HomeComponent 模板中：

<p (click)="getMessage()">
 <message-component></message-component>
</p>

Answer 3

您的服务中缺少 Observable 变量。这是你应该怎么做的：

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

@Injectable()
export class HomeService {
  private openMessage: Subject<string> = new Subject<string>();
  public $openMessage: Observable<string> = this.openMessage.asObservable();

  public sendMessage(message: string) {
    this.openMessage.next(message);
  }
}

然后您将能够调用subscribe() 方法到您的类中声明的$openMessage 变量。以下是如何更新您的MessageComponent.ts：

export class MessageComponent {
  public name: string = '';
  public flag: boolean = false;

  constructor(private _service:HomeService){
    this._service.$openMessage.subscribe((message)=>{
      this.message = res;
      this.flag = true;
      setTimeout(()=>{
        this.flag=false;
      },4000)
    })
  }
}