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

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

和UserList.componenet：

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

---

但我应该如何将值从标题输入传输到用户列表

如果组件之间存在父子关系，则可以使用

@Input

装饰器。否则请使用

服务

或

行为主题

。以下是基于优先级的方法：

使用服务（最推荐）[]

使用RxJS库中的行为主题

使用Redux进行状态管理

使用浏览器存储（会话/本地），但最不推荐使用 数据安全

---

谢谢你的回答

最后我使用服务

   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>

和列表一样

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

---

其中build是管道的名称

您可以使用可注入服务来移动和存储该值？您可以使用

@Input

查看此链接可能的重复项查看此处：

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

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

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