angular - 如何在 NgModel 组件和管道角度之间进行通信

Question

我创建了一个集成输入字段以执行搜索的组件，但是当我想让它与搜索管道通信时，后者不回答，而当我直接将字段输入集成到正文中时，最后一个与管道通信。

消息搜索组件 html：

  <input type="text" [(ngModel)]="searchedTerm">  

消息搜索组件 ts：

 import { Component, Input } from '@angular/core';

  @Component({
    selector: 'search-message',
    templateUrl: 'search-message.component.html'
  })
  export class SearchMessageComponent   {
  @Input() messageSearch: string;
 }

应用程序组件 html：

   <search-message [messageSearch]="searchTerm"></search-message>
    <div class="card" *ngFor="let item of list | search: searchedTerm">
      <span [innerHTML]="item.name"></span>
    </div>

应用组件 ts ::

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

   @Component({
     selector: 'my-app',
     templateUrl: './app.component.html',
     styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
    searchTerm: string;
    list = [
     { 'id': 1, 'name': 'apple'},
     { 'id': 1, 'name': 'pineapple'},
     { 'id': 1, 'name': 'jackfruit'},
     { 'id': 1, 'name': 'somefruit'},
 ];
  }

搜索过滤器管道：

     import { Pipe, PipeTransform } from '@angular/core';

     import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
     @Pipe({
       name: 'search'
     })
   export class SearchPipe implements PipeTransform {

 constructor(private _sanitizer: DomSanitizer) {}

 transform(list: any[], searchText: string): any[] {
   if (!list) { return []; }
   if (!searchText) { return list; }

    searchText = searchText.toLowerCase();
    let response = list.filter( item => {
      return item.name.toLowerCase().includes(searchText);
   });


     return response;
  }
  }

https://stackblitz.com/edit/angular-searchpipe-gnqtgv

解决方案是什么？

标签： angular

Answer 1

您可以避免使用管道来过滤（出于性能原因可能应该避免使用它）数据数组。相反，您可以通过以下方式处理它。在您的组件上创建一个表示过滤后的数据列表的新属性。过滤后的结果将保存到此属性中，以避免改变原始列表：

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  searchTerm: string;
  list = [
    { id: 1, name: "apple" },
    { id: 1, name: "pineapple" },
    { id: 1, name: "jackfruit" },
    { id: 1, name: "somefruit" }
  ];
  filteredList = [];

  ngOnInit() {
    this.filteredList = this.list;
  }

  handleChange($event: string) {
    this.filteredList = this.list.filter(e => e.name.toLowerCase().includes($event));
  }
}

<search-message (searchChanged)="handleChange($event)"></search-message>
<div class="card" *ngFor="let item of filteredList">
    <span [innerHTML]="item.name"></span>
</div>

在您的搜索组件中，您可以使用输出（一种方法）在更改/输入时发出搜索字符串：

import { Component, Input, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "search-message",
  templateUrl: "search-message.component.html"
})
export class SearchMessageComponent {
  searchedTerm: "";
  @Input() messageSearch: string;
  @Output() searchChanged = new EventEmitter<String>();

  handleChange() {
    this.searchChanged.emit(this.searchedTerm);
  }
}

<input type="text" [(ngModel)]="searchedTerm" (input)="handleChange()">

这是一个实际的例子。

我建议查看有关组件交互的文档/示例，因为它很好地展示了通过输入/输出或更优选共享服务跨组件共享数据的不同方法。

希望这会有所帮助！