如何将组件输出作为另一组件输入？Ionic组件交互问题咨询

看你已经走对了第一步——用@Output把event-settings的搜索结果向外传递，并且在父组件里通过(searchedEvents)="getSearchedEvents($event)"接收了数据，接下来只需要把父组件拿到的数据再传给events-list就行，具体步骤如下：

1. 父组件中存储接收的数据 #

在父组件的.ts文件里定义一个变量，专门保存从event-settings传来的搜索结果：

// 父组件.ts文件
filteredEvents: any[] = []; // 可以根据你的实际数据结构调整类型

getSearchedEvents(eventData: any[]) {
  this.filteredEvents = eventData; // 把接收的结果赋值给变量
}

2. 给events-list组件添加输入属性 #

在events-list组件的.ts文件里，用@Input()定义一个用来接收数据的属性：

// events-list.component.ts文件
import { Input } from '@angular/core';

@Input() events: any[] = []; // 同样根据数据结构调整类型

3. 父组件模板中绑定输入属性 #

修改父组件的模板，把存储好的filteredEvents传给events-list，同时调整*ngIf的条件（比如有过滤结果时再显示列表）：

<ion-content padding>
  <button ion-button type="button" class="showFilterBtn" 
          (click)="isCollapsed = !isCollapsed" 
          [attr.aria-expanded]="!isCollapsed">
    Show Filter
  </button>
  <event-settings [eventName]="false" 
                  [accompaniment]="false" 
                  [hidden]="isCollapsed" 
                  (searchedEvents)="getSearchedEvents($event)"></event-settings>
  <events-list *ngIf="filteredEvents.length > 0" [events]="filteredEvents"></events-list>
</ion-content>

如果需要在没有过滤结果时也显示默认列表，你可以在父组件里保留原始的全量事件数据（比如叫allEvents），然后通过三元表达式传递：

<events-list [events]="filteredEvents.length ? filteredEvents : allEvents"></events-list>

这样就完成了从event-settings输出到events-list输入的完整数据传递链路啦～

内容的提问来源于stack exchange，提问作者leo180593