Ist es möglich, eine Pipe im Code zu verwenden?


102

Wenn ich meine benutzerdefinierte Pipe in einer Vorlage verwende, sieht es folgendermaßen aus:

{{user|userName}}

Und es funktioniert gut.

Ist es möglich, eine Pipe im Code zu verwenden?

Ich versuche es so zu benutzen:

let name = `${user|userName}`;

Aber es zeigt

Benutzername ist nicht definiert

Meine alternative Methode ist die db.collection.findOne()manuelle Verwendung im Code. Aber gibt es einen klugen Weg?


Sie können eine solche Vorlage nicht verwenden, Sie müssen das Rohr in Ihren Konstruktor injizieren
Yoann Prot

Entschuldigung, ich werde es klar machen. Ich spritze bereits Pfeifen
Hongbo Miao

Welche Pipe versuchen Sie im Code zu verwenden? Ist das Ihre benutzerdefinierte Pfeife?
Siva

1
Ich glaube nicht, dass du es kannst, da ...es nicht von Angular ausgeführt wird. Es ist ES6 String Interpolation ...
Thierry Templier

5
Sehen Sie, ob dies hilft, stackoverflow.com/questions/35144821/…
Siva

Antworten:


111

Deklarieren Sie zuerst die Pipe in providersIhrem Modul:

import { YourPipeComponentName } from 'your_component_path';

@NgModule({
  providers: [
    YourPipeComponentName
  ]
})
export class YourServiceModule {
}

Dann können Sie @Pipein einer Komponente wie folgt verwenden:

import { YourPipeComponentName } from 'your_component_path';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

  YourFunction(value) {
    this.pipe.transform(value, 'pipeFilter');
  }
}

1
Sieht gut aus! Aber aus irgendeinem Grund kann die Abhängigkeitsinjektion meine Pipe nicht in den Konstruktor injizieren, obwohl sie problemlos in HTML verwendet werden kann. Es wird in einem anderen Modul deklariert und exportiert. Vielleicht muss es auch in der Anbieterliste stehen? Das Erstellen und Verwenden einer neuen Instanz von MyPipe funktioniert jedoch. Nur DI hat ein Problem ...
Sam

19
@ Sam In der Tat muss es in der sein providers. Add YouPipeComponentNameto your providersund diese Methode wird perfekt funktionieren.
SrAxi

4
Stellen Sie außerdem sicher, dass Sie es den richtigen Anbietern hinzufügen. Wenn Sie die Pipe global verwenden möchten, fügen Sie sie in die app.module-Anbieter ein. Wenn Sie es nur in einigen träge geladenen Modulen verwenden möchten, legen Sie es bei den jeweiligen Modulanbietern ab
Phil

Falscher Importpfad. Pipe wird nicht unter @ angle / common verfügbar sein
Andris

@Andris Ich habe es bearbeitet. Es war ein Fehler. Ich meine, du musst dein Rohrmodul importieren.
saghar.fadaei

107

@ Shiva ist richtig. Und danke!

Die Verwendung des Rohrs in der Komponente sieht also folgendermaßen aus:

let name = new UserNamePipe().transform(user);

Link zu einer anderen ähnlichen Frage.


3
Dies funktioniert, folgt jedoch wahrscheinlich nicht den Best Practices / bevorzugten Mustern von Angular. Das Übergeben der Pipe an den Konstruktor als Komponentenabhängigkeit, wie in der anderen Antwort gezeigt, ist "richtiger".
Josh

Gibt es auf diese Weise keine Leistungsprobleme? Einige Leute könnten es die ganze Zeit benutzen!
Mohammad Kermani

2
Dies ist eine völlig falsche Art, Rohre zu verwenden. Rohre sind Spezialklassen und sollten mit den von Angular bereitgestellten Spezialmitteln verwendet werden. Wenn Sie einige Funktionen benötigen, die in einer Pipe implementiert sind, diese jedoch wie eine reguläre TypeScript-Klasse verwenden, müssen Sie diese regularKlasse erstellen und in Ihrem TS-Code verwenden ( your-component.tsz. B.). Wenn Sie dieselbe Funktionalität in der Pipe benötigen, können Sie diese regularKlasse auch immer aus der Pipe verwenden.
Alexander Abakumov

Der größte Unterschied besteht darin, dass Sie auf diese Weise mehr Instanzen der Klasse erstellen. Bei Verwendung der Angular-Syntax verhält es sich wie ein Singelton und wird nur einmal instanziiert.
Sir2B
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.