¿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?


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

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');
  }
}

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.


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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.