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

Posted 2023-03-13

【中文标题】在非子组件Angular 2之间传递输入（搜索栏）的值

【英文标题】：Transfer the value of input (search bar) between non-child components 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看这个链接***.com/questions/34088209/…

How to pass object from one component to another in Angular 2?的可能重复

看看这里：***.com/questions/46047854/…

【参考方案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 进行状态管理。 使用浏览器存储（会话/本地），但最不推荐使用 数据安全。