Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/29.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 多个项目上的角度事件发射器_Angular_Events_Output_Observable_Dom Events - Fatal编程技术网

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

Angular 多个项目上的角度事件发射器,angular,events,output,observable,dom-events,Angular,Events,Output,Observable,Dom Events,我正在开发一个应用程序,但我有一个小问题。我有一个使用ngfor加载的书籍列表,其中包含3个组件(页眉、内容、页脚)。在我的标题中,我有一个“喜欢”按钮,允许我跟随作者 当我点击它时,我可以将该操作发送到我的父组件,但我想知道如何在不重新加载页面的情况下将该操作传播到同一作者的所有其他书籍上 你能帮我吗 谢谢您可以使用一种简单的消息模式,例如服务: export interface Message { message: string, receiver: string } 别忘了不受

我正在开发一个应用程序,但我有一个小问题。我有一个使用ngfor加载的书籍列表,其中包含3个组件(页眉、内容、页脚)。在我的标题中,我有一个“喜欢”按钮,允许我跟随作者

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

你能帮我吗


谢谢

您可以使用一种简单的消息模式,例如服务:

export interface Message {
  message: string,
  receiver: string
}
别忘了不受约束:

ngOnDestroy(): void {
    this.messagesServiceSubscription.unsubscribe();
  }
例如,您可以更新消息以发送作者的id


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

您需要发布您迄今为止尝试过的代码。我尝试了invent emitter output和view children,但它不起作用!我尝试了您的解决方案,但我孩子的组件没有收到新的值。我在我的ngfor中添加了一个TrackByFn,并且遇到了相同的问题:(
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();
  }