Angular 多个项目上的事件发射器

Question

我正在开发一个应用程序，但遇到了一个小问题。我有一个使用带有 3 个组件（header、内容、页脚）的 ngfor 加载的书籍列表。在我的 header 中，我有一个“喜欢”按钮，可以让我关注作者。

当我点击它时，我可以将动作发送到我的 parent 组件，但我想知道如何在不重新加载页面的情况下将动作传播到同一作者的所有其他书籍。

你能帮帮我吗？

谢谢

Answer 1

您可以遵循简单的消息模式，例如服务：

export interface Message {
  message: string,
  receiver: string
}

this.messagesService.sendMessage(
  { message: 'likeButton', receiver: 'all' }
);

import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';
import { Message } from '@shared/interfaces/message.interface';

@Injectable({
  providedIn: 'root'
})
export class MessagesService {
  constructor() { }

  private subject = new Subject<any>();

  sendMessage(message: Message) {
    this.subject.next(message);
  }

  subscribeToMessagesChannel(): Observable<Message> {
    return this.subject.asObservable();
  }
}

并且在任何你想要的地方：

this.messagesServiceSubscription = this.messagesService.subscribeToMessagesChannel().subscribe(
      message => {
        if (message.receiver === 'likeButton') {
          // Search in your structure and change the value to turn on the button.
        }
      }
    );

别忘了取消订阅：

ngOnDestroy(): void {
    this.messagesServiceSubscription.unsubscribe();
  }

例如，您可以更新消息以发送作者的 ID。

也许它是一个比其他解决方案更复杂的解决方案，但你可以将它设置在你的项目中并在很多场景中使用它，使你的组件通信比普通的父子更容易。

Angular 多个项目上的事件发射器

Angular event emitter on multiple items

events

dom-events

observable

output

angular