如何传递从子组件接收的函数中的数据，然后将其传递给另一个子组件？

Question

我有一个带有两个子组件的标题组件，一个是搜索栏，另一个是搜索列表。 现在我可以通过发出函数接收从搜索栏组件到标题的输入，但是如何使用 @Input 将接收到的数据传递给另一个孩子？

搜索栏组件

sendMessage() {
    this.messageEvent.emit(this.searchText)
  }

标题组件

message: string;

  receiveMessage($event) {
    this.message = $event
  }

搜索列表组件

@Input() message: any;

标题 HTML

<div *ngIf="message">
  <app-search-list [message]="message" ></app-search-list>
</div>

我得到 错误类型错误：无法读取未定义的属性“concat”。

在搜索栏组件中，我有一个输入字段，当我在那里输入时，我正在使用管道搜索数据... 所以我正在做的是...... 当我输入某些内容时，我会得到该文本，将其传递给父组件，然后将其传递给另一个子组件，在该子组件中我调用该管道以进行搜索查询。

谢谢

Answer 1

您可以使用可以将消息广播到订阅组件的单例服务，而不是通过标头路由消息。

创建一个负责广播值的数据服务：

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

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

  private value: string;
  listeners = [];

  constructor() {
    this.value = '';
  }

  onDataChange(fn) {
    this.listeners.push(fn);
  }

  set setData(value: string) {
    this.value = value;
    this.listeners.forEach((fn) => {
      fn(value);
    });
  }
}

在您要执行通信的每个组件中，注入数据服务。

constructor(private dataService: DataService) {}

您可以像这样在组件中设置数据的值：

this.dataService.setData= 'New value';

然后您可以在 ngOnInit 上的不同组件中订阅数据服务的值更改事件：

ngOnInit() {
    this.dataService.onDataChange((value) => {
         this.data = value;
    });
}

Live Demo