Est-il possible d'utiliser un tube dans le code?

104

Lorsque j'utilise mon tuyau personnalisé dans un modèle, c'est comme ça:

{{user|userName}}

Et ça marche bien.

J'essaye de l'utiliser comme ceci:

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

Mais ça montre

userName n'est pas défini

Mon autre moyen consiste à utiliser db.collection.findOne()manuellement dans le code. Mais y a-t-il un moyen intelligent?

angular angular-pipe

— Hongbo Miao
source

Vous ne pouvez pas utiliser de modèle comme celui-ci, vous devez injecter le tuyau dans votre constructeur

— Yoann Prot

désolé, je vais le préciser. J'injecte déjà des tuyaux

— Hongbo Miao

Quel tube essayez-vous d'utiliser dans le code? Est-ce votre pipe personnalisée?

— Siva le

Je ne pense pas que vous puissiez car il ...n'est pas exécuté par Angular. C'est l'interpolation de cordes ES6 ...

— Thierry Templier

Voyez si cela aide stackoverflow.com/questions/35144821/…

— Siva

Réponses:

113

Déclarez d'abord le tube dans le providersde votre module:

import { YourPipeComponentName } from 'your_component_path';

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

Ensuite, vous pouvez utiliser @Pipedans un composant comme celui-ci:

import { YourPipeComponentName } from 'your_component_path';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

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

— saghar.fadaei
source

À l'air cool! Mais pour une raison quelconque, l'injection de dépendances ne peut pas injecter mon tube dans le constructeur, même s'il peut être utilisé en html sans problème. Il est déclaré et exporté dans un autre module, peut-être doit-il également figurer dans la liste des fournisseurs? La création et l'utilisation d'une nouvelle instance de MyPipe fonctionnent cependant. Seul DI a un problème ...

— Sam

@Sam En effet, il doit être dans le providers. Ajoutez YouPipeComponentNameà votre providerset cette méthode fonctionnera parfaitement.

— SrAxi

Assurez-vous également de l'ajouter aux bons fournisseurs. Si vous souhaitez utiliser le canal globalement, placez-le dans les fournisseurs app.module. Si vous souhaitez l'utiliser uniquement dans certains modules chargés paresseusement, mettez-le dans les fournisseurs de leurs modules respectifs

— Phil

Chemin d'importation incorrect. Pipe wont by disponible sous @ angular / common

— Andris

@Andris Je l'ai édité. C'était une erreur. Je veux dire que vous devez importer votre module de tuyaux.

— saghar.fadaei

107

@Siva a raison. Et merci!

La façon d'utiliser le tuyau dans le composant est donc la suivante:

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

Lien vers une autre question similaire.

— Hongbo Miao
source

Cela fonctionne, mais cela ne suit probablement pas les meilleures pratiques / modèles préférés Angular. Passer le tube dans le constructeur en tant que dépendance de composant, comme démontré dans l'autre réponse, est "plus juste".

— Josh

n'y a-t-il aucun problème de performance en utilisant cette façon? certaines personnes pourraient l'utiliser tout le temps!

— Mohammad Kermani

C'est une manière complètement fausse d'utiliser les tuyaux. Les tuyaux sont des classes à usage spécial et doivent être utilisés via les moyens spéciaux fournis par Angular. Si vous avez besoin d'une fonctionnalité implémentée dans un tube, mais de manière à l'utiliser comme une classe TypeScript standard, vous devez créer cette regularclasse et l'utiliser dans votre code TS ( your-component.tspar exemple). Si vous avez besoin des mêmes fonctionnalités dans le tube, vous pouvez toujours utiliser cette regularclasse à partir du tube.

— Alexander Abakumov

La plus grande différence est que vous créez plus d'instances de la classe de cette manière. En utilisant la syntaxe Angular, il se comporte comme un singelton et n'est instancié qu'une seule fois.

— Sir2B