javascript - Angular在不同组件中显示搜索结果

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>

typescript

  @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”，以便我可以利用它将此值绑定(bind)到 *ngFor。任何帮助将不胜感激。

Answer 1

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

在此服务中，我们可以使用主题或 eventEmitter(但主题更好)，并且在主页组件中我们可以发出该主题

在搜索卡组件中，我们将订阅该主题来检索数据

这是一个例子

共享.service.ts

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

@Injectable({providedIn: 'root'}) // the service is available application wide, so the same instance of this class will be available in the whole application

export class SharedService {

  searchSubject = new Subject<String>(); // a new subject of type String, replace it with your data type
}

在 home 组件中，一旦选择了解决方案，只需将其发送到共享服务，您可以将 (change) 或 (ngModelChange) 添加到 html 中的列表中以检查更改，一旦发生更改，发出主题

所以 home 组件 html 中的函数可能是这样的

(ngModelChange) = "onSelectSolution()"

并在 ts 文件中

constructor(private sharedService: SharedService) { // inject the shared service

}

onSelectSolution() {
  // just emit the event
  this.sharedService.searchSubject.next(this.selectedSolutionId); // emit the value to the shared service
}

然后在搜索卡组件中

import { OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

// add the selector 

export class SearchCardComponent implements OnInit, OnDestroy {
  subscription: Subscription // define some subscription property to assign the subscription to, and destroy it once we left this component

  constructor(private sharedService: SharedService){}

  ngOnInit() {
    // here to subscribe to the subject in the sharedService
    this.subscription = this.sharedService.searchSubject.subscribe((mySearch: String) => {
      // now we passed the search from the home component to the search card component
    });
  }

  ngOnDestroy() {
    // just unsubscribe the subscription we used
    this.subscription.unsubscribe();
  }
}

check this link to see the difference between (change) and (ngModelChange) difference between (change) and (ngModelChange)