Czy w kodzie można użyć potoku?


104

Kiedy używam mojej niestandardowej rury w szablonie, wygląda to tak:

{{user|userName}}

I działa dobrze.

Czy w kodzie można użyć potoku?

Próbuję go używać w ten sposób:

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

Ale to widać

nazwa użytkownika nie jest zdefiniowana

Moim alternatywnym sposobem jest db.collection.findOne()ręczne użycie w kodzie. Ale czy jest jakiś sprytny sposób?


Nie możesz użyć takiego szablonu, musisz wstrzyknąć rurkę do swojego konstruktora
Yoann Prot

przepraszam, wyjaśnię to. Wtryskuję już rury
Hongbo Miao

Którą rurkę próbujesz użyć w kodzie? Czy to twoja niestandardowa rura?
Siva

1
Nie sądzę, że możesz, ponieważ ...nie jest wykonywany przez Angulara. To interpolacja strun ES6 ...
Thierry Templier

5
Sprawdź, czy to pomoże stackoverflow.com/questions/35144821/…
Siva

Odpowiedzi:


113

Najpierw zadeklaruj potok w providersswoim module:

import { YourPipeComponentName } from 'your_component_path';

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

Następnie możesz użyć @Pipetakiego komponentu:

import { YourPipeComponentName } from 'your_component_path';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

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

1
Wygląda dobrze! Ale z jakiegoś powodu iniekcja zależności nie może wstrzyknąć mojego potoku do konstruktora, mimo że można go bez problemu użyć w html. Jest zadeklarowany i wyeksportowany w innym module, może też musi znajdować się na liście dostawców? Tworzenie i używanie nowej instancji MyPipe działa jednak. Tylko DI ma problem ...
Sam

19
@Sam Rzeczywiście musi być w providers. Dodaj YouPipeComponentNamedo swojego, providersa ta metoda zadziała idealnie.
SrAxi,

4
Upewnij się również, że dodajesz go do właściwych dostawców. Jeśli chcesz używać potoku globalnie, umieść go w dostawcach app.module. Jeśli chcesz go używać tylko w niektórych leniwie ładowanych modułach, umieść go w odpowiednich dostawcach modułów
Phil,

Błędna ścieżka importu. Rura nie będzie dostępna pod @ angular / common
Andris

@Andris Edytowałem to. To był błąd. Mam na myśli, że musisz zaimportować swój moduł rurowy.
saghar.fadaei

107

@Siva ma rację. I dzięki!

Tak więc sposób użycia rury w komponencie wygląda następująco:

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

Link do innego podobnego pytania.


3
To działa, ale prawdopodobnie nie jest zgodne z najlepszymi praktykami / preferowanymi wzorcami Angular. Przekazanie potoku do konstruktora jako zależności komponentu, jak pokazano w drugiej odpowiedzi, jest „bardziej właściwe”.
Josh

czy nie ma problemów z wydajnością przy użyciu tego sposobu? niektórzy ludzie mogą go używać cały czas!
Mohammad Kermani

2
To jest całkowicie błędny sposób używania rur. Rury są klasami specjalnego przeznaczenia i powinny być używane za pomocą specjalnych środków dostarczonych przez firmę Angular. Jeśli potrzebujesz jakiejś funkcjonalności zaimplementowanej w potoku, ale w taki sposób, aby używać jej jak zwykłej klasy TypeScript, musisz utworzyć tę regularklasę i użyć jej w kodzie TS ( your-component.tsna przykład). Jeśli potrzebujesz tej samej funkcjonalności w potoku, zawsze możesz użyć tej regularklasy również z potoku.
Alexander Abakumov

Największą różnicą jest to, że w ten sposób tworzysz więcej instancji klasy. Przy użyciu składni Angular zachowuje się jak singelton i jest tworzony tylko raz.
Sir2B
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.