Question

我想创建一个带输入过滤器的用户列表。我的app.component.html是这样的：

<header>
  <app-header></app-header>
</header>

<div class="col-md-3">
  <app-left-menu></app-left-menu>
</div>
<div class="col-md-8">
  <router-outlet></router-outlet>
</div>

标题就像

<div class="col-md-4">
    <input type="text" [(ngModel)]="headerFilter">
  </div>

如何在userList componentsnet中使用headerFilter？

我知道@Pipe并尝试：

管道

   export class BuildPipe implements PipeTransform {

  transform (values: any[], field: string, value: string): any[] {
    if (!values || !values.length) {
      return [];
    }
    if (!value) {
      return values;
      }
    return values.filter(it => it[field].indexOf(value) >= 0 );
  }
}

和UserList.componenet：

<div class="item" *ngFor="let user of users | build: 'firstname': filter">

但是如何将值从头输入传输到userList？

Answer 1

如果组件之间存在父子关系，则可以使用@Input装饰器。否则，请使用Services或BehaviourSubject。以下是基于优先级的方法：

使用服务（最推荐）[example]。
使用RxJS库中的行为主题。
使用Redux进行状态管理。
使用浏览器存储（会话/本地），但最不推荐使用浏览器存储数据安全。

Answer 2

感谢所有答案！

最后我使用服务

   import { Injectable } from '@angular/core';

@Injectable()
export class FilterService {
  headerFilter: string;

  constructor() { }

  public getFilter(): string {
    return this.headerFilter;
  }

  public setFilter(filter): void {
    this.headerFilter = filter;
  }
}

标题

中的

和搜索框组件

    <div>
  <input #input type="text" (input)="update(input.value)">
</div>

searchbox.ts

   update (value) {
    this.filter.setFilter(value);
  }

并列出

 <div class="item" *ngFor="let user of users | build: 'firstname': filterServ.getFilter()">

其中build是管道名称

在非子组件Angular 2之间传输输入（搜索栏）的值

2 个答案: