Angular跨组件场景下select配合自定义Pipe筛选不生效问题

Angular中每个组件的实例属性是作用域完全隔离的。select所在的CardComponent和表格所在的TableComponent各自维护了独立的buscarporRegion变量：select选中时只会修改CardComponent内部的变量值，TableComponent里的同名变量始终停留在初始空值，管道拿不到最新的筛选参数，自然无法触发正确的过滤逻辑。两个组件放在同一个文件内时共用同一个作用域的变量，所以功能正常。

根据两个组件的层级关系，选对应方案即可。

方案1：父子组件传值（适用于两个组件同属一个父容器的场景，无额外依赖） #

利用Angular原生的@Output输出、@Input输入装饰器完成跨组件值传递：

1. 改造select所在的CardComponent
   组件类新增输出事件，选中值变化时向父组件抛出最新筛选值：

   import { Component, EventEmitter, OnInit, Output } from '@angular/core';
   export class CardComponent implements OnInit {
     buscarporRegion = '';
     // 新增输出事件
     @Output() regionSelected = new EventEmitter<string>();
   
     onRegionChange() {
       this.regionSelected.emit(this.buscarporRegion);
     }
     // 原有paises等逻辑保持不变
   }
   

   模板给select绑定change事件，同时修正option的value绑定写法（插值写法在复杂场景下可能出现值不匹配问题）：

   <select class="form-control mx-sm-1 mb-2" [(ngModel)]="buscarporRegion" (change)="onRegionChange()">
     <option value="">Regiones</option>
     <option [value]="region.region" *ngFor="let region of paises">{{region.region}}</option>
   </select>
   

2. 改造父容器组件
   父组件负责中转两个子组件的传值，先在类中定义存储筛选值的属性：

   currentFilterRegion = '';
   // 接收select组件抛出的筛选值
   updateFilter(region: string) {
     this.currentFilterRegion = region;
   }
   

   父组件模板中绑定事件和传值：

   <!-- 监听select组件的选中事件 -->
   <app-card (regionSelected)="updateFilter($event)"></app-card>
   <!-- 把最新筛选值传入表格组件 -->
   <app-table [filterRegion]="currentFilterRegion"></app-table>
   

3. 改造表格所在的TableComponent
   组件类删除原有自定义的buscarporRegion属性，改为接收父组件传入的值：

   import { Component, Input, OnInit } from '@angular/core';
   export class TableComponent implements OnInit {
     // 接收父组件传入的筛选值
     @Input() filterRegion = '';
     // 原有paises接口加载逻辑保持不变
   }
   

   模板修正两个问题：一是把管道参数换成传入的filterRegion，二是删除多余的错误闭合标签</div>：

   <tbody>
     <tr *ngFor="let pais of paises | buscarRegion:filterRegion">
       <td>{{ pais.region }}</td>
       <td>{{ pais.name }}</td>
       <td>{{ pais.capital }}</td>
     </tr>
   </tbody>
   

方案2：共享服务传值（适用于两个组件层级跨度大、无直接嵌套关系的场景） #

通过单例服务维护全局的筛选状态，两个组件都从服务中读写筛选值：

1. 新建共享服务

   import { Injectable } from '@angular/core';
   import { BehaviorSubject } from 'rxjs';
   
   @Injectable({ providedIn: 'root' })
   export class RegionFilterService {
     // 存储筛选值的可观察对象，初始值为空
     private _regionFilter = new BehaviorSubject<string>('');
     public readonly regionFilter$ = this._regionFilter.asObservable();
   
     setFilter(region: string) {
       this._regionFilter.next(region);
     }
   }
   

2. 改造CardComponent
   注入服务，选中值变化时更新服务中的筛选值：

   import { Component, OnInit } from '@angular/core';
   import { RegionFilterService } from './region-filter.service'; // 替换为实际服务路径
   export class CardComponent implements OnInit {
     buscarporRegion = '';
     constructor(private filterService: RegionFilterService) {}
   
     onRegionChange() {
       this.filterService.setFilter(this.buscarporRegion);
     }
     // 原有逻辑保持不变
   }
   

   模板的select绑定和方案1一致，添加(change)="onRegionChange()"即可。
3. 改造TableComponent
   注入服务，订阅筛选值的变化，更新组件内的筛选参数：

   import { Component, OnDestroy, OnInit } from '@angular/core';
   import { RegionFilterService } from './region-filter.service';
   import { Subject, takeUntil } from 'rxjs';
   export class TableComponent implements OnInit, OnDestroy {
     buscarporRegion = '';
     private destroy$ = new Subject<void>();
     constructor(private filterService: RegionFilterService) {}
   
     ngOnInit() {
       // 订阅筛选值变化，组件销毁时自动取消订阅避免内存泄漏
       this.filterService.regionFilter$
         .pipe(takeUntil(this.destroy$))
         .subscribe(val => {
           this.buscarporRegion = val;
         })
     }
   
     ngOnDestroy() {
       this.destroy$.next();
       this.destroy$.complete();
     }
     // 原有paises接口加载逻辑保持不变
   }
   

   表格模板仅需删除多余的</div>错误标签，原有管道写法保持不变即可正常生效。

原有管道缺少空值兜底逻辑，遇到无数据、筛选值为空的场景会抛出异常，可优化为：

@Pipe({
  name: 'buscarRegion'
})
export class BuscarRegionPipe implements PipeTransform {
  transform(value: any[], filterArg: string): any[] {
    // 数据异常时返回空数组
    if (!value || !Array.isArray(value)) return [];
    // 无筛选值时返回全量数据
    if (!filterArg?.trim()) return value;
    const target = filterArg.toLowerCase();
    return value.filter(item => item.region.toLowerCase().includes(target));
  } 
}

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