Angular2: Benutzerdefiniertes Rohr konnte nicht gefunden werden

Das eingebaute Rohr ist Arbeit, aber alle benutzerdefinierten Rohre, die ich verwenden möchte, sind der gleiche Fehler:

Die Pipe 'actStatusPipe' wurde nicht gefunden

[ERROR ->] {{data.actStatus | actStatusPipe}}

Ich habe zwei Möglichkeiten ausprobiert, deklariere es in den Erklärungen von app.module:

app.module.ts:

import {ActStatusPipe} from '../pipe/actPipe'

@NgModule({
    declarations: [
        AppComponent,
        HomePage,
        ActivitiesList,
        ActStatusPipe
    ],
    ...
})

Oder verwenden Sie ein anderes Modul, um alle meine Pipes zu deklarieren und zu exportieren: // pipe

import {ActStatusPipe} from "./actPipe"

@NgModule({
    declarations:[ActStatusPipe],
    imports:[CommonModule],
    exports:[ActStatusPipe]
})

export class MainPipe{}

und importiere es in app.module.

//pipe
import {MainPipe} from '../pipe/pipe.module'
    
@NgModule({
    declarations:[...],
    imports:[...,MainPipe],
})

Aber keiner von ihnen funktioniert in meiner App.

Hier ist mein Code der Pipe:

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

@Pipe({
    name:'actStatusPipe'
})
export class ActStatusPipe implements PipeTransform{
    transform(status:any):any{
        switch (status) {
            case 1:
                return "UN_PUBLISH";
            case 2:
                return "PUBLISH";
            default:
                return status
        }
    }
}

Ich denke, es ist fast das gleiche mit dem Dokument (in der Tat habe ich gerade aus dem Dokument kopiert und eine kleine Änderung vorgenommen)

Und die Version von Angular2 ist 2.1.

Viele Lösungen, die in stackOverflow und google gesucht werden können, werden in meiner App ausprobiert, funktionieren jedoch nicht.

Das hat mich sehr verwirrt, danke für deine Antwort!

siehe, das funktioniert bei mir.

ActStatus.pipe.ts Zuerst ist dies meine Pipe

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

@Pipe({
  name:'actStatusPipe'
})
export class ActStatusPipe implements PipeTransform{
  transform(status:any):any{
    switch (status) {
      case 1:
        return "UN_PUBLISH";
      case 2:
        return "PUBLISH";
      default:
        return status
    }
  }
}

main-pipe.module.ts im Rohrmodul muss ich meine Rohrleitung (en) deklarieren und exportieren.

import { NgModule } from '@angular/core';
import {CommonModule} from "@angular/common";

import {ActStatusPipe} from "./ActStatusPipe.pipe"; // <---

@NgModule({
  declarations:[ActStatusPipe], // <---
  imports:[CommonModule],
  exports:[ActStatusPipe] // <---
})

export class MainPipe{}

app.module.ts Benutzer dieses Pipe-Moduls in einem beliebigen Modul.

@NgModule({
  declarations: [...],
  imports: [..., MainPipe], // <---
  providers: [...],
  bootstrap: [AppComponent]
})

Sie können Pipe direkt in diesem Modul verwenden. Wenn Sie jedoch das Gefühl haben, dass Ihre Pfeife in mehr als einer Komponente verwendet wird, empfehle ich Ihnen, meinem Ansatz zu folgen.

1. Rohr erstellen.
2. Erstellen Sie ein separates Modul und deklarieren und exportieren Sie eine oder mehrere Pipe.
3. Benutzer dieses Rohrmodul.

Die Verwendung von Rohren hängt vollständig von der Komplexität und den Anforderungen Ihres Projekts ab. Möglicherweise haben Sie nur eine Pipe, die im gesamten Projekt nur einmal verwendet wurde. In diesem Fall können Sie es direkt verwenden, ohne ein Pipe / s-Modul zu erstellen (Modulansatz).

Das hat bei mir nicht funktioniert. (Ich bin mit Angular 2.1.2). Ich musste MainPipeModule NICHT in app.module.ts importieren und es stattdessen in das Modul importieren, in das auch die Komponente importiert wird, die die Pipe verwendet.

Wenn Ihre Komponente in einem anderen Modul deklariert und importiert wird, müssen Sie Ihr PipeModule auch in dieses Modul aufnehmen.

import {CommonModule} from "@angular/common";

Das Hinzufügen dieser Anweisung zum Pipe-Modul hat mein Problem gelöst.

Ich habe kein Problem mit der akzeptierten Antwort, da sie mir sicherlich geholfen hat. Nach der Implementierung habe ich jedoch immer noch den gleichen Fehler erhalten.

Es stellte sich heraus, dass ich die Pipes auch in meiner Komponente falsch aufgerufen habe:

Meine custom-pipe.ts-Datei:

@Pipe({ name: 'doSomething' })
export class doSomethingPipe implements PipeTransform {
    transform(input: string): string {
        // Do something
    }
}

So weit, so gut, aber in meiner Datei component.html habe ich die Pipes wie folgt aufgerufen:

{{ myData | doSomethingPipe }}

Dies löst erneut den Fehler aus, dass die Pipe nicht gefunden wurde. Dies liegt daran, dass Angular die Rohre unter dem im Rohrdekorator definierten Namen nachschlägt. In meinem Beispiel sollte die Pipe stattdessen so heißen:

{{ myData | doSomething }}

Dummer Fehler, aber es hat mich ziemlich viel Zeit gekostet. Hoffe das hilft!

Eine wirklich dumme Antwort (ich werde mich gleich abstimmen), aber das hat bei mir funktioniert:

Wenn Sie nach dem Hinzufügen Ihrer Pipe immer noch Fehler erhalten und Ihre Angular-Site mit " ng serve" ausführen , stoppen Sie sie ... und starten Sie sie erneut.

Für mich hat keiner der anderen Vorschläge funktioniert, aber ng servees hat gereicht , einfach anzuhalten und dann " " neu zu starten , um den Fehler zu beheben.

Seltsam.

Wenn Sie Ihre Pipe in einem anderen Modul deklarieren, stellen Sie sicher, dass Sie sie dem Modul "Deklarationen und Exporte" des Moduls hinzufügen, und importieren Sie das Modul in das Modul, das diese Pipe verwendet.

Stellen Sie sicher, dass Sie, wenn die Deklarationen für die Pipe in einem Modul ausgeführt werden, während Sie die Pipe in einem anderen Modul verwenden, korrekte Importe / Deklarationen im aktuellen Modul bereitstellen, unter dem sich die Klasse befindet, in der Sie die Pipe verwenden. In meinem Fall war das der Grund für den Pipe Miss

Ich bin auf ein ähnliches Problem gestoßen, aber das Einfügen in das Modul meiner Seite hat nicht funktioniert.

Ich hatte eine Komponente erstellt, die ein Rohr benötigte. Diese Komponente wurde deklariert und in eine ComponentsModule-Datei exportiert, die alle benutzerdefinierten Komponenten der App enthält.

Ich musste mein PipesModule als Import in mein ComponentsModule einfügen, damit diese Komponenten diese Pipes verwenden konnten und nicht im Modul der Seite, das diese Komponente verwendet.

Credits : Linkbeschreibung hier eingeben Antwort von: tumain