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.