Angular中非父子组件输入框值传递及用户列表过滤实现

这个问题在Angular开发里很常见——你的Header组件和UserList组件属于共享父容器但不在同一模板层级（UserList通过router-outlet加载），直接用@Input不太方便。我给你两种实用的解决方案，从简单场景到灵活的跨组件共享：

方案一：使用共享服务（推荐用于实时变化的跨路由组件） #

这是Angular处理跨组件数据共享的标准方式，尤其适合实时更新的过滤场景。

1. 创建一个全局共享的过滤服务 #

用BehaviorSubject来保存和发射过滤值，它能让订阅者实时获取最新数据：

// filter.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root' // 全局注入，无需在模块中声明
})
export class FilterService {
  // 初始化默认空值
  private filterSubject = new BehaviorSubject<string>('');
  // 对外暴露可观察对象，防止外部修改源数据
  currentFilter$ = this.filterSubject.asObservable();

  // 更新过滤值的方法
  updateFilter(filterValue: string) {
    this.filterSubject.next(filterValue);
  }
}

2. 在Header组件中注入服务，实时推送输入值 #

修改Header组件，当输入框内容变化时，调用服务的更新方法：

// header.component.ts
import { Component } from '@angular/core';
import { FilterService } from './filter.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent {
  headerFilter: string = '';

  constructor(private filterService: FilterService) {}

  // 输入框变化时推送最新值
  onFilterInput() {
    this.filterService.updateFilter(this.headerFilter);
  }
}

对应的Header模板绑定输入事件：

<!-- header.component.html -->
<div class="col-md-4">
  <input type="text" [(ngModel)]="headerFilter" (input)="onFilterInput()">
</div>

3. 在UserList组件中订阅过滤值，应用到管道 #

注入服务并订阅过滤值的变化，同时记得在组件销毁时取消订阅，避免内存泄漏：

// user-list.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FilterService } from '../filter.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit, OnDestroy {
  users = []; // 替换成你的实际用户数据
  filter: string = '';
  private filterSubscription!: Subscription;

  constructor(private filterService: FilterService) {}

  ngOnInit() {
    // 订阅过滤值的实时变化
    this.filterSubscription = this.filterService.currentFilter$.subscribe(filterValue => {
      this.filter = filterValue;
    });
  }

  ngOnDestroy() {
    // 销毁订阅
    this.filterSubscription.unsubscribe();
  }
}

你的UserList模板可以继续使用已实现的管道：

<!-- user-list.component.html -->
<div class="item" *ngFor="let user of users | build: 'firstname': filter">
  <!-- 这里展示用户信息 -->
</div>

方案二：父组件作为中转（适合简单的非路由场景） #

如果你的UserList不是路由组件，而是直接嵌套在AppComponent模板里，可以用父组件做中间层传递数据：

1. Header组件添加输出事件 #

// header.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent {
  headerFilter: string = '';

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

  onFilterInput() {
    this.filterChanged.emit(this.headerFilter);
  }
}

2. AppComponent接收事件并传递给UserList #

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  currentFilter: string = '';

  onFilterUpdate(filterValue: string) {
    this.currentFilter = filterValue;
  }
}

修改AppComponent模板：

<!-- app.component.html -->
<header>
  <app-header (filterChanged)="onFilterUpdate($event)"></app-header>
</header>
<div class="col-md-3">
  <app-left-menu></app-left-menu>
</div>
<div class="col-md-8">
  <!-- 如果UserList是直接嵌套的，用@Input传递 -->
  <app-user-list [filter]="currentFilter"></app-user-list>
</div>

3. UserList组件用@Input接收过滤值 #

// user-list.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent {
  users = [];
  @Input() filter: string = '';
}

额外优化：让过滤管道大小写不敏感 #

你的当前管道是区分大小写的，可以优化一下提升用户体验：

export class BuildPipe implements PipeTransform {
  transform(values: any[], field: string, value: string): any[] {
    if (!values || !values.length) { return []; }
    if (!value) { return values; }
    const lowerCaseValue = value.toLowerCase();
    return values.filter(it => it[field].toLowerCase().includes(lowerCaseValue));
  }
}

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