Angular拆分组件后SearchPipe搜索功能失效问题求助

开发者阿泽

2026-7-26

解决Angular拆分组件后搜索功能失效的问题

问题核心是拆分组件后，父子组件间的数据传递未正确实现：SearchBar组件的输入文本没能同步到父组件，DisplayContent组件也没拿到实时的searchText和words数据，导致过滤逻辑无法生效。以下是完整修复步骤：

1. 修改SearchBar组件

search-bar.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-search-bar',
  templateUrl: './search-bar.component.html',
  styleUrls: ['./search-bar.component.css']
})
export class SearchBarComponent {
  @Output() searchTextChanged = new EventEmitter<string>();
  searchText = '';

  onSearchTextChange() {
    this.searchTextChanged.emit(this.searchText);
  }
}

search-bar.component.html

<input type="text" class="form-control" placeholder="Search" 
       [(ngModel)]="searchText" 
       (ngModelChange)="onSearchTextChange()">

2. 修改DisplayContent组件

display-content.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-display-content',
  templateUrl: './display-content.component.html',
  styleUrls: ['./display-content.component.css']
})
export class DisplayContentComponent {
  @Input() words: any[] = [];
  @Input() searchText = '';
}

display-content.component.html

<div *ngFor="let e of words | search: searchText">
  <p>{{ e.word }}</p>
  <ol>
    <li *ngFor="let meaning of e.meanings">{{ meaning }}</li>
  </ol>
</div>

3. 修改AppComponent模板

app.component.html

<div class="container mt-5">
  <app-search-bar (searchTextChanged)="searchText=$event"></app-search-bar>
  <app-display-content [words]="words" [searchText]="searchText"></app-display-content>
</div>