要实现搜索管道,首先需要创建一个自定义的管道。下面是一个使用Angular的示例代码:
search.pipe.ts
的文件,其中包含以下代码:import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'search'
})
export class SearchPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if (!items) return [];
if (!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter(item => {
return item.toLowerCase().includes(searchText);
});
}
}
SearchPipe
,例如在app.module.ts
中:import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SearchPipe } from './search.pipe';
@NgModule({
imports: [BrowserModule],
declarations: [SearchPipe],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
中:
- {{ item }}
在上面的示例中,我们创建了一个名为search
的管道,并在模板中使用它来过滤一个名为items
的数组。用户在输入框中输入搜索文本时,searchText
属性将被更新,从而触发管道的变化检测,过滤并显示符合搜索文本的结果。