如何正确设置“过滤管道”,以便在组件输入字段中输入值,另一个组件显示搜索结果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何正确设置“过滤管道”,以便在组件输入字段中输入值,另一个组件显示搜索结果相关的知识,希望对你有一定的参考价值。

如果它在一个组件中,那么一切都很好

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

<div class="quiz-item" *ngFor="let test of tests | filter: term" (click)="passTestNotify(test)"> ...

但是我想在一个组件中输入一个值,而在另一个组件中,应该通过我在第一个组件中输入的变量“term”按名称过滤测试。

我不知道该怎么做。我的变种:Service,ViewChild,BehaviorSubject,另一个管道。请帮忙解决..

我的烟斗

@Pipe({
  name: 'filter',
  pure: false
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], term): any {
    console.log('term', term);

    return term
      ? items.filter(item => item.title.indexOf(term) !== -1)
      : items;
  }
}
答案

这是通过BehaviorSubject完成的。好东西)

以上是关于如何正确设置“过滤管道”,以便在组件输入字段中输入值,另一个组件显示搜索结果的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 React.JS 正确验证输入值?

VueJs - 使用输入字段创建子组件的正确方法是啥

Formik 中如何保存输入字段中的数据

渲染后如何在输入字段上设置焦点?

如何将数据从功能组件传递到类组件

在 Vue 中创建条件输入字段组件