É possível usar um tubo no código?


103

Quando eu uso meu pipe personalizado em um modelo, é assim:

{{user|userName}}

E funciona bem.

É possível usar um tubo no código?

Tento usar assim:

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

Mas mostra

userName não está definido

Minha forma alternativa é usar db.collection.findOne()manualmente no código. Mas existe alguma maneira inteligente?


Você não pode usar um modelo como este, você tem que injetar o tubo em seu construtor
Yoann Prot

desculpe, vou deixar isso claro. Já injeto tubos
Hongbo Miao

Qual tubo você está tentando usar no código? Este é o seu cachimbo personalizado?
Siva

1
Não acho que você possa, já que ...não é executado pelo Angular. É interpolação de string ES6 ...
Thierry Templier

Respostas:


111

Primeiro, declare o pipe no providersdo seu módulo:

import { YourPipeComponentName } from 'your_component_path';

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

Então você pode usar @Pipeem um componente como este:

import { YourPipeComponentName } from 'your_component_path';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

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

1
Parece legal! Mas por alguma razão a injeção de dependência não pode injetar meu pipe no construtor, embora possa ser usado em html sem problemas. Ele é declarado e exportado em outro módulo, talvez precise estar na lista de provedores também? Criar e usar uma nova instância de MyPipe funciona, no entanto. Apenas DI tem um problema ...
Sam

19
@Sam Na verdade, ele precisa estar no providers. Adicione YouPipeComponentNameao seu providerse este método funcionará perfeitamente.
SrAxi de

4
Além disso, certifique-se de adicioná-lo aos provedores corretos. Se você quiser usar o canal globalmente, coloque-o nos provedores app.module. Se você quiser usá-lo apenas em alguns módulos carregados lentamente, coloque-o nos respectivos provedores de módulo
Phil

Caminho de importação errado. A tubulação não estará disponível em @ angular / common
Andris

@Andris eu editei. Isso foi um erro. Quero dizer, você deve importar seu módulo de tubo.
saghar.fadaei

107

@Siva está correto. E obrigado!

Portanto, a maneira de usar o tubo no componente é a seguinte:

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

Link para outra pergunta semelhante.


3
Isso funciona, mas provavelmente não está seguindo as melhores práticas / padrões preferidos do Angular. Passar o pipe para o construtor como uma dependência de componente, conforme demonstrado na outra resposta, é "mais correto".
Josh

não há nenhum problema de desempenho ao usar essa forma? algumas pessoas podem usá-lo o tempo todo!
Mohammad Kermani

2
Esta é uma maneira completamente errada de usar tubos. Os tubos são classes de uso especial e devem ser usados ​​através dos meios especiais fornecidos pela Angular. Se você precisa de alguma funcionalidade implementada em um pipe, mas de forma a usá-la como uma classe normal do TypeScript, você deve criar essa regularclasse e usá-la em seu código TS ( your-component.tspor exemplo). Se você precisar da mesma funcionalidade no pipe, sempre poderá usar essa regularclasse do pipe também.
Alexander Abakumov

A maior diferença é que você cria mais instâncias da classe dessa forma. Com o uso da sintaxe Angular, ele se comporta como um único tom e é instanciado apenas uma vez.
Sir2B
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.