web-dev-qa-db-fra.com

comment créer et appeler un tuyau à partir du composant dans angular 2?

Je veux créer un tube dynamique que je vais appeler depuis le composant.

import {Component, Pipe, PipeTransform} from 'angular2/core';

@Pipe({ name: 'filter', pure: false })
export class filter implements PipeTransform {
  transform(value) {
    this.items1=value;
    this.ticket1 = [];
    if (this.items1.length >0) {
      for (var i = 0; i < this.items1.length; i++) {
        this.ticket1.Push(this.items1[i])
      }
    }
  }
}

Je veux appeler ce tuyau à partir du composant.

angularpipes-filters
13
Arron

Vous devez le spécifier dans l'attribut pipes de votre composant

@Component({
  pipes: [ filter ] 
})
export class MyComponent {
  (...)
}

et utilisez-le dans votre modèle:

{{someArray | filter}}
<div *ngFor="someArray | filter">(...)</div>

Modifier

Si vous souhaitez appeler le canal directement dans la classe de composants, vous devez l'instancier et appeler sa méthode tranform:

@Component({
  (...)
})
export class MyComponent {
  constructor() {
    let filterPipe = new filter();
    let arr = [ ... ];
    var fiteredArr = filterPipe.transform(arr);
  }
  (...)
}
24
Thierry Templier

Je voulais juste ajouter à @ pasha-oleynik réponse. Angular 2+, y compris Ionic 2+, tous s'attendent à ce que le tuyau soit déclaré dans le module:

@NgModule({
    declarations: [
        AppComponent ,
        filter
    ]

C'est également le seul endroit où le tuyau doit être déclaré. Il n'y a plus de propriété de tuyau sous un module ou un composant.

4
SimplyComplexable

Dans la version rc6, vous devez enregistrer les canaux que vous souhaitez utiliser dans un module -> déclarations

@NgModule({
    declarations: [
        AppComponent ,
        filter
    ]....
4
Pasha Oleynik

Vous devez enregistrer les canaux que vous souhaitez utiliser dans un composant:

@Component({
  ...
  pipes: [filter],
  template: `
<div *ngFor="let item of someData | filter">{{item}}</div>
`
  ...})
class SomeComponent {
  someData = [ ... ];
}

@NgModule({
  imports: [CommonModule],
  declarations: [filter]
})
export class MyFilterModule()

Pour rendre le tube disponible, ajoutez le module aux importations où vous souhaitez l'utiliser

@NgModule({
  declarations: [AppComponent, SomeComponent],
  imports: [BrowserModule, MyFilterModule]
})
export class AppModuleModule()

Si vous voulez appeler le canal depuis le code

let f = new filter();
f.transform(value, filterArg);
2
Günter Zöchbauer

Dans le cas où vous souhaitez utiliser votre pipe sur différents modules plusieurs fois, je vous suggère d'agréger tous vos pipes dans un module (par exemple, PipesAggrModule), puis d'importer ce module dans le module souhaité. Par exemple:

my-pipe.module.ts

@Pipe({name: 'MyPipe'})
export class MyPipe { ... }

pipes-aggr.module.ts:

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    ...
    MyPipe,
    MyPipe2,
    ...
  ],
  declarations: [..., MyPipe, MyPipe2, ...]
})
export class PipesAggrModule {}

Ensuite, pour utiliser vos pipes, importez simplement l'importation du PipesAggrModule dans le module voulu.

my.module.ts

@NgModule({
  imports: [
    CommonModule,
    PipesAggrModule
  ],
...
}
export class MyModule {}
1
Menelaos Kotsollaris