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

Hongbo Miao
fonte
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
5
Veja se isso ajuda stackoverflow.com/questions/35144821/…
Siva

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');
  }
}
saghar.fadaei
fonte
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.

Hongbo Miao
fonte
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