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

【问题标题】：Transfer the value of input (search bar) between non-child components Angular 2在非子组件Angular 2之间传递输入（搜索栏）的值
【发布时间】：2018-06-18 07:55:50
【问题描述】：

我想创建一个带有输入过滤器的用户列表。我的 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 组件中使用 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？

【问题讨论】：

您可以使用可注入服务来移动和存储值吗？
你可以使用@Input看这个链接stackoverflow.com/questions/34088209/…
How to pass object from one component to another in Angular 2?的可能重复
看看这里：stackoverflow.com/questions/46047854/…

标签： angular typescript

【解决方案1】：

感谢所有回答！

我终于使用服务了

   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 是管道的名称

【讨论】：

【解决方案2】：

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

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

【讨论】：