È possibile utilizzare una pipe nel codice?


104

Quando utilizzo la mia pipe personalizzata in un modello, è così:

{{user|userName}}

E funziona bene.

È possibile utilizzare una pipe nel codice?

Provo a usarlo in questo modo:

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

Ma si vede

userName non è definito

Il mio modo alternativo è usare db.collection.findOne()manualmente nel codice. Ma esiste un modo intelligente?


Non puoi usare un modello come questo, devi iniettare il tubo nel tuo costruttore
Yoann Prot

scusa, lo metterò in chiaro. Ho già iniettato tubi
Hongbo Miao

Quale pipe stai cercando di utilizzare nel codice? Questa è la tua pipa personalizzata?
Siva

1
Non credo che tu possa poiché ...non viene eseguito da Angular. È l'interpolazione di stringhe ES6 ...
Thierry Templier

Risposte:


113

Per prima cosa dichiara la pipe nella parte providersdel tuo modulo:

import { YourPipeComponentName } from 'your_component_path';

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

Quindi puoi usare @Pipein un componente come questo:

import { YourPipeComponentName } from 'your_component_path';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

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

1
Sembra bello! Ma per qualche motivo l'iniezione di dipendenza non può iniettare il mio pipe nel costruttore, anche se può essere utilizzato in html senza problemi. Viene dichiarato ed esportato in un altro modulo, forse deve essere anche nell'elenco dei provider? Tuttavia, la creazione e l'utilizzo di una nuova istanza di MyPipe funziona. Solo DI ha un problema ...
Sam

19
@ Sam, infatti, deve essere nel file providers. Aggiungi YouPipeComponentNameal tuo providerse questo metodo funzionerà perfettamente.
SrAxi

4
Assicurati anche di aggiungerlo ai provider corretti. Se desideri utilizzare la pipe a livello globale, inseriscila nei provider di app.module. Se vuoi usarlo solo in alcuni moduli caricati pigramente, inseriscilo nei rispettivi provider del modulo
Phil

Percorso di importazione errato. Il tubo non sarà disponibile sotto @ angular / common
Andris

@Andris l'ho modificato. È stato un errore. Voglio dire, devi importare il tuo modulo pipe.
saghar.fadaei

107

@Siva è corretto. E grazie!

Quindi il modo di utilizzare il tubo nel componente è il seguente:

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

Collegamento a un'altra domanda simile.


3
Funziona, ma probabilmente non sta seguendo le migliori pratiche / modelli preferiti di Angular. Passare la pipe nel costruttore come dipendenza del componente, come dimostrato nell'altra risposta, è "più corretto".
Josh

non ci sono problemi di prestazioni usando questo modo? alcune persone potrebbero usarlo tutto il tempo!
Mohammad Kermani

2
Questo è un modo completamente sbagliato di usare i tubi. I tubi sono classi speciali e devono essere utilizzati tramite i mezzi speciali forniti da Angular. Se hai bisogno di alcune funzionalità implementate in una pipe, ma in modo da regularusarle come una normale classe TypeScript, devi creare quella classe e usarla nel tuo codice TS ( your-component.ts, per esempio). Se hai bisogno della stessa funzionalità nella pipe, puoi sempre usare anche quella regularclasse dalla pipe.
Alexander Abakumov

La differenza più grande è che crei più istanze della classe in questo modo. Con l'utilizzo della sintassi angolare si comporta come un singelton e viene istanziato solo una volta.
Sir2B
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.