首页 文章

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

提问于
浏览
1

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

Component

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

Template

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

Pipe

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

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

2 回答

  • -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演示

  • 3

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

    Answer 否则,您可以将管道放入组件中,在您声明组件的同一NgModule中的providers数组中声明该管道,它应该可以正常工作 .

    看看这个编辑过的Heroes Tour plunkr:https://embed.plnkr.co/gYyZANyZAJGmzaPFLG7n/

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

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

    Edited code

    //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 { }
    

相关问题