¿Es posible usar una tubería en el código?

103

Cuando uso mi tubería personalizada en una plantilla, es así:

{{user|userName}}

Y funciona bien.

¿Es posible usar una tubería en el código?

Intento usarlo así:

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

Pero se nota

userName no está definido

Mi forma alternativa es usar db.collection.findOne()manualmente en el código. ¿Pero hay alguna forma inteligente?

Hongbo Miao
fuente
No puede usar una plantilla como esta, debe inyectar la tubería en su constructor
Yoann Prot
lo siento, lo dejaré claro. Ya me inyecto tuberías
Hongbo Miao
¿Qué tubería estás intentando usar en el código? ¿Es esta tu pipa personalizada?
Siva
1
No creo que puedas ya ...que no lo ejecuta Angular. Es la interpolación de cuerdas ES6 ...
Thierry Templier
5
Vea si esto ayuda stackoverflow.com/questions/35144821/…
Siva

Respuestas:

112

Primero declare la tubería en el providersde su módulo:

import { YourPipeComponentName } from 'your_component_path';

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

Entonces puedes usar @Pipeen un componente como este:

import { YourPipeComponentName } from 'your_component_path';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

  YourFunction(value) {
    this.pipe.transform(value, 'pipeFilter');
  }
}
saghar.fadaei
fuente
1
¡Se ve bien! Pero por alguna razón, la inyección de dependencia no puede inyectar mi tubería en el constructor, aunque se puede usar en html sin problemas. Se declara y exporta en otro módulo, ¿tal vez también deba estar en la lista de proveedores? Sin embargo, crear y usar una nueva instancia de MyPipe funciona. Sólo DI tiene un problema ...
Sam
19
@Sam De hecho, debe estar en formato providers. Agregue YouPipeComponentNamea su providersy este método funcionará perfectamente.
SrAxi
4
También asegúrese de agregarlo a los proveedores correctos. Si desea utilizar la tubería globalmente, colóquela en los proveedores de módulo de aplicación. Si desea usarlo solo en algunos módulos cargados de manera perezosa, colóquelo en los proveedores de sus respectivos módulos
Phil
Ruta de importación incorrecta. Pipe no estará disponible en @ angular / common
Andris
@Andris Lo he editado. Fue un error. Quiero decir que debes importar tu módulo de tubería.
saghar.fadaei
107

@Siva tiene razón. ¡Y gracias!

Entonces, la forma de usar la tubería en el componente es así:

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

Enlace a otra pregunta similar.

Hongbo Miao
fuente
3
Esto funciona, pero probablemente no esté siguiendo las mejores prácticas / patrones preferidos de Angular. Pasar la tubería al constructor como una dependencia de componente, como se demuestra en la otra respuesta, es "más correcto".
Josh
¿No hay ningún problema de rendimiento al usar esta forma? ¡Algunas personas pueden usarlo todo el tiempo!
Mohammad Kermani
2
Esta es una forma completamente incorrecta de usar tuberías. Las tuberías son clases de propósito especial y deben usarse a través de los medios especiales proporcionados por Angular. Si necesita alguna funcionalidad implementada en una tubería, pero en una forma de usarla como una clase normal de TypeScript, entonces debe crear esa regularclase y usarla en su código TS ( your-component.tspor ejemplo). Si necesita la misma funcionalidad en la tubería, siempre puede usar esa regularclase de la tubería también.
Alexander Abakumov
La mayor diferencia es que crea más instancias de la clase de esta manera. Con el uso de la sintaxis angular, se comporta como un singelton y solo se instancia una vez.
Sir2B