角度显示搜索结果的不同组成部分

Question

我在首页（homePageComponent）中具有搜索功能，当我单击搜索时，它将重定向到另一个名为搜索列表页面（searchListComponent）的页面，而searchListComponent本身又有一个组件（根据应用程序设计），称为搜索卡组件（searchCardComponent），其中显示所有搜索结果。我试图使用eventemitter将搜索文本从homePageComponent发送到searchCardComponent，但是不知何故数据没有通过。如果有人对此提供帮助，那就太好了。

下面的示例代码

homePageComponent

HTML（产品A）

     <ng-select
              class="col-md-5 solution-list-dropdown"
              [items]="productType$ | async"
              [addTag]="true"
              [(ngModel)]="selectedSolutionId"
              bindLabel="description"
              bindValue="id"
              placeholder="Select"
              [clearable]=true
              [searchable]=true
              [dropdownPosition]="'down'"
              [ngClass]="{ 'dropdown-is-invalid': submitted && f.category.errors }">
           </ng-select>
<button class="red-button"  (click)="searchRedirection(selectedSolutionId)">
          Search
        </button>

打字稿

  @Output() searchValue = new EventEmitter<string>();

   public searchRedirection(selectedSolutionId: string) {
      this.searchValue.emit(selectedSolutionId);
      this.router.navigate(['/category/' + selectedSolutionId]);
    }

SearchListComponent

HTML

<div class="container-fluid product-card-container p-0" id="hor-divider">

    <div class="product-list">
      <app-product-card (searchValue)="onApplyEvent($event)" *ngFor="let product of products | filter:searchText | filter:filterText" [product]="product">
      </app-product-card>
    </div>

</div>

Typescript

  onApplyEvent(event: any): any {
    console.log('event : ' + event);
  }

这里我期望控制台日志打印“事件：产品A”，以便我可以利用它将这个值绑定到* ngFor中。任何帮助，将不胜感激。

Answer 1

事件发射器以您声明的方式将无法以这种方式工作，因为只有具有@Output装饰器的homePageComponent的父组件才能读取它。您可以创建一个单独的事件类，然后将其导入两个组件（一个发出并接收），但这在我看来是一种可怕的做法。更好的办法是将搜索词作为路由中的查询参数发送，或者创建一个共享服务，该服务将BehaviorSubject对象作为字段，因为它可以存储和重新发送最后发出的值。这是参数示例

Answer 2

您可以使用共享服务之类的东西在两个组件之间传输数据，