it-swarm.com.de

Wie erstelle und benenne ich eine Pipe aus der Komponente in angular 2?

Ich möchte eine dynamische Pipe erstellen, die ich von der Komponente aufrufen werde.

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])
      }
    }
  }
}

Ich möchte diese Pipe von der Komponente aufrufen.

13
Arron

Sie müssen es im Attribut pipes Ihrer Komponente angeben

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

und benutze es in deiner Vorlage:

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

Bearbeiten

Wenn Sie die Pipe direkt innerhalb der Komponentenklasse aufrufen möchten, müssen Sie sie instanziieren und ihre tranform -Methode aufrufen:

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

Ich wollte nur hinzufügen @ pasha-oleynik Antwort. Angular 2+ einschließlich Ionic 2+ erwarten alle, dass die Pipe im Modul deklariert wird:

@NgModule({
    declarations: [
        AppComponent ,
        filter
    ]

Auch dies ist der einzige Ort, an dem die Pipe deklariert werden muss. Unter einem Modul oder einer Komponente befindet sich keine Pipe-Eigenschaft mehr.

4

In Version RC6 müssen Sie die Pipes registrieren, die Sie in einem Modul verwenden möchten -> Deklarationen

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

Sie müssen die Pipes registrieren, die Sie in einer Komponente verwenden möchten:

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

Fügen Sie das Modul zu den Importen hinzu, in denen Sie es verwenden möchten, um die Pipe verfügbar zu machen

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

Wenn Sie die Pipe aus dem Code aufrufen möchten

let f = new filter();
f.transform(value, filterArg);
2

Für den Fall, dass Sie Ihre Pipe mehrmals für verschiedene Module verwenden möchten, empfehle ich Ihnen, alle Ihre Pipes in einem Modul zusammenzufassen (z. B. PipesAggrModule) und dieses Modul dann in das gewünschte Modul zu importieren. Zum Beispiel:

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

Um Ihre Pipes zu verwenden, importieren Sie einfach das PipesAggrModule in das gewünschte Modul.

my.module.ts

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