Plunkr Demo

Question

我有一个组件，它有自己的数据，我想使用ngFor和管道在模板中过滤。该组件将接受将用于过滤的搜索值。

组件

@Component({
    selector: 'seach-results',
    ...
)}
export class SearchResultsComponent implements OnInit {
    @Input('searchValue') searchValue;
    contacts: any[] = [
        { name: 'John Doe', phone: '123-123-1234' }
    ...
}

模板

<div *ngFor="let item of contacts | phone:searchValue>
    <div class="name">{{item.name}}</div>
    <div class="phone">{{item.phone}}</div>
</div>

管

@Pipe({
    name: 'phone'
})
export class PhonePipe {
    transform(items: any[], args) {
        return items.filter(
            item => item.name.toLowerCase().indexOf(args.toLowerCase()) !== -1
        );
    }
}

我无法弄清楚的是，如何在组件内部识别“手机”管道。我可以让它工作的唯一方法是我在NgModule中声明了电话管道。这是唯一的方法吗？我觉得这应该以某种方式自包含在组件中。它似乎曾经被弃用的角度2组件中的“管道”描述，但我找不到任何可以解释你应该做什么的东西。想法？

Answer 1

将管道限制为特定组件的唯一方法是对管道和组件使用单独的ngModule，然后只导出组件，以便可以在另一个模块中使用它。请参阅下面的演示。

SearchResultsModule：

@NgModule({
  exports: [
    SearchResultsComponent 
  ],
  declarations: [
    SearchResultsComponent,
    PhonePipe
  ]
})
export class SearchResultsModule { }

的AppModule：

@NgModule({
  imports: [
    SearchResultsModule
  ],
  declarations: [
    AppComponent //<-- App Component can use the SearchResultsComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Plunkr Demo

Answer 2

是的，你是对的。它必须在NgModule中。我没有看到将它留在那里的伤害。为什么要将管道限制为仅一个组件？如果你只需要一个组件，我就不会使用管道。

<强>答案否则，您可以将管道放入组件中，在您声明组件的同一NgModule中的providers数组中声明该管道，它应该可以正常工作。

查看这个编辑过的英雄巡演：https://embed.plnkr.co/gYyZANyZAJGmzaPFLG7n/

导航到仪表板组件。看看那个和主要的模块。让我知道如果我需要解释更多。如果你真的想要包含该组件中的所有内容，你可以为你的组件提供自己的@NgModule，但无论你做什么，你都必须在某处进行一些expot / import。在我看来，只在主模块的供应商数组中导入管道是最简单的。

https://angular.io/docs/ts/latest/guide/pipes.html

已编辑的代码

//COMPONENT AND PIPE
import { Component, OnInit, Pipe } from '@angular/core';

import { Hero }        from './hero';
import { HeroService } from './hero.service';

@Component({
  moduleId: module.id,
  selector: 'my-dashboard',
  templateUrl: 'dashboard.component.html',
  styleUrls: [ 'dashboard.component.css' ]
})
export class DashboardComponent implements OnInit {
  heroes: Hero[] = [];
  x = [];
  phonePipe
  constructor(private heroService: HeroService) { 
    this.phonePipe = new PhonePipe();
  }

  ngOnInit(): void {
    let test = ['a', 'a', 'b', 'c'];
    this.x = this.phonePipe.transform(test, 'a');
    console.log(this.x);
    this.heroService.getHeroes()
      .then(heroes => this.heroes = heroes.slice(1, 5));
  }
}


@Pipe({
    name: 'phone'
})
export class PhonePipe {
    transform(items: any[], args) {
        return items.filter( 
            item => item.toLowerCase().indexOf(args.toLowerCase()) !== -1
        );
    }
}



//MODULE

import './rxjs-extensions';

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';

import { AppRoutingModule } from './app-routing.module';

// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';

import { AppComponent }         from './app.component';
import { DashboardComponent, PhonePipe }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroService }          from './hero.service';
import { HeroSearchComponent }  from './hero-search.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroDetailComponent,
    HeroesComponent,
    HeroSearchComponent
  ],
  providers: [ HeroService, PhonePipe ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

如何创建具有自己的管道过滤器的角度2组件

2 个答案:

SearchResultsModule：

的AppModule：

Plunkr Demo