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>

我越来越错误TypeError：无法读取未定义的属性'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

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

1 个答案: