如何在Angular中跨组件配置filter pipe实现搜索结果联动？

你提到的几个思路里，Service结合BehaviorSubject是Angular中跨组件共享状态最推荐的方案，能完美解决你在输入组件输入关键词后，让列表组件同步过滤数据的需求。下面一步步给你实现：

1. 创建共享搜索数据服务 #

这个服务负责存储和传递搜索关键词term，用BehaviorSubject可以让订阅的组件实时收到最新值：

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

@Injectable({
  providedIn: 'root' // 全局注入，所有组件都能访问
})
export class SearchService {
  // 初始化默认值为空字符串
  private termSubject = new BehaviorSubject<string>('');
  // 暴露可观察对象，供组件订阅
  public term$ = this.termSubject.asObservable();

  // 更新搜索关键词的方法
  setSearchTerm(term: string): void {
    this.termSubject.next(term);
  }
}

2. 修改搜索输入组件（发送关键词的组件） #

在输入组件中注入SearchService，每当输入框的值变化时，调用服务的方法更新关键词：

<input class="top-input" type="text" placeholder="Search..." 
       [(ngModel)]="term" 
       (ngModelChange)="updateSearchTerm(term)">

import { Component } from '@angular/core';
import { SearchService } from './search.service';

@Component({
  selector: 'app-search-input',
  templateUrl: './search-input.component.html'
})
export class SearchInputComponent {
  term = '';

  constructor(private searchService: SearchService) {}

  updateSearchTerm(term: string): void {
    this.searchService.setSearchTerm(term);
  }
}

3. 修改列表展示组件（接收关键词并过滤的组件） #

在列表组件中注入SearchService，订阅关键词的变化，然后用你现有的FilterPipe进行过滤：

<div class="quiz-item" *ngFor="let test of tests | filter: currentTerm" 
     (click)="passTestNotify(test)">
  <!-- 你的列表内容 -->
</div>

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SearchService } from './search.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-test-list',
  templateUrl: './test-list.component.html'
})
export class TestListComponent implements OnInit, OnDestroy {
  tests = []; // 你的数据源
  currentTerm = '';
  private termSubscription!: Subscription;

  constructor(private searchService: SearchService) {}

  ngOnInit(): void {
    // 订阅关键词变化，实时更新currentTerm
    this.termSubscription = this.searchService.term$.subscribe(term => {
      this.currentTerm = term;
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，避免内存泄漏
    this.termSubscription.unsubscribe();
  }

  passTestNotify(test: any): void {
    // 你的点击逻辑
  }
}

4. 关于你的FilterPipe的注意事项 #

你的FilterPipe设置了pure: false，这能确保每次currentTerm变化时都会触发过滤（因为pure pipe默认只有输入的引用变化才会执行）。不过要注意，pure: false会让pipe在每个变更检测周期都执行，若数据量很大可能影响性能。如果想优化，可以把pipe改成pure，因为字符串本身是不可变的，每次currentTerm更新时引用都会变化，你可以试试把pure: false改成pure: true，看看是否正常工作。

其他方案的优缺点补充 #

• ViewChild：只适用于父子组件直接通信的场景，若你的输入组件和列表组件不是父子关系，这种方案就不适用，而且耦合性高，不推荐用于跨组件状态共享。
• 自定义Pipe单独使用：Pipe本身只是负责过滤逻辑，没办法帮你跨组件传递term，还是需要配合状态共享方案使用。

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