register - native pipes angular




Não foi possível encontrar o tubo '' pipe personalizado angular2 (6)

Achei a resposta do "módulo cruzado" acima muito útil para a minha situação, mas gostaria de expandir isso, pois há outra ruga a considerar. Se você tem um submódulo, ele também não pode ver os pipes no módulo pai em meus testes. Por esse motivo também, pode ser necessário colocar tubos no próprio módulo separado.

Aqui está um resumo das etapas que tomei para resolver os pipes que não estão visíveis no submódulo:

  1. Retire os pipes do SharedModule (pai) e coloque-o no PipeModule
  2. No SharedModule, importe o PipeModule e exporte (para outras partes do aplicativo dependentes do SharedModule para obter automaticamente acesso ao PipeModule)
  3. No Sub-SharedModule, importe o PipeModule, para obter acesso ao PipeModule, sem precisar reimportar o SharedModule, o que criaria um problema de dependência circular, entre outros problemas.

Outra nota de rodapé da resposta "módulo cruzado" acima: quando criei o PipeModule, removi o método estático forRoot e importei o PipeModule sem isso no meu módulo compartilhado. Meu entendimento básico é que o forRoot é útil para cenários como singletons, que não se aplicam necessariamente a filtros.

Não consigo corrigir esse erro. Eu tenho uma barra de pesquisa e um ngFor. Estou tentando filtrar a matriz usando um pipe personalizado como este:

import { Pipe, PipeTransform } from '@angular/core';

import { User } from '../user/user';

@Pipe({
  name: 'usersPipe',
  pure: false
})
export class UsersPipe implements PipeTransform {
  transform(users: User [], searchTerm: string) {
    return users.filter(user => user.name.indexOf(searchTerm) !== -1);
  }
}

Uso:

<input [(ngModel)]="searchTerm" type="text" placeholder="Search users">

<div *ngFor="let user of (users | usersPipe:searchTerm)">
...
</div>

Erro:

zone.js:478 Unhandled Promise rejection: Template parse errors:
The pipe 'usersPipe' could not be found ("
<div class="row">
    <div  
    [ERROR ->]*ngFor="let user of (user | usersPipe:searchTerm)">

Versões angulares:

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"bootstrap": "^3.3.6",
"zone.js": "^0.6.12"

Eu criei um módulo para pipes no mesmo diretório em que meus pipes estão presentes

import { NgModule } from '@angular/core';
///import pipe...
import { Base64ToImage, TruncateString} from './'  

   @NgModule({
        imports: [],
        declarations: [Base64ToImage, TruncateString],
        exports: [Base64ToImage, TruncateString]
    })

    export class SharedPipeModule { }   

Agora importe esse módulo no app.module:

import {SharedPipeModule} from './pipe/shared.pipe.module'
 @NgModule({
     imports: [
    ...
    , PipeModule.forRoot()
    ....
  ],

Agora ele pode ser usado importando o mesmo no módulo aninhado


Sugerindo uma resposta alternativa aqui:

Não é necessário criar um módulo separado para o Pipe, mas é definitivamente uma alternativa. Verifique a nota de rodapé do documento oficial: https://angular.io/guide/pipes#custom-pipes

Você usa seu pipe personalizado da mesma maneira que usa tubos internos.
Você deve incluir seu pipe na matriz de declarações do AppModule. Se você optar por injetar seu pipe em uma classe, deverá fornecê-lo na matriz de fornecedores do seu NgModule.

Tudo o que você precisa fazer é adicionar seu canal à matriz de declarações e a matriz de provedores no module que você deseja usar o canal.

declarations: [
...
CustomPipe,
...
],
providers: [
...
CustomPipe,
...
]

Verifique se você não está enfrentando um problema de "módulo cruzado"

Se o componente que está usando o canal não pertencer ao módulo que declarou o componente do canal "globalmente", o canal não será encontrado e você receberá esta mensagem de erro.

No meu caso, eu declarei o pipe em um módulo separado e importei esse módulo em qualquer outro módulo com componentes usando o pipe.

Eu declarei que o componente no qual você está usando o pipe é

o módulo de tubulação

 import { NgModule }      from '@angular/core';
 import { myDateFormat }          from '../directives/myDateFormat';

 @NgModule({
     imports:        [],
     declarations:   [myDateFormat],
     exports:        [myDateFormat],
 })

 export class PipeModule {

   static forRoot() {
      return {
          ngModule: PipeModule,
          providers: [],
      };
   }
 } 

Uso em outro módulo (por exemplo, app.module)

  // Import APPLICATION MODULES
  ...
  import { PipeModule }    from './tools/PipeModule';

  @NgModule({
     imports: [
    ...
    , PipeModule.forRoot()
    ....
  ],

Nota: Somente se você não estiver usando módulos angulares

Por alguma razão, isso não está nos documentos, mas tive que importar o pipe personalizado no componente

import {UsersPipe} from './users-filter.pipe'

@Component({
    ...
    pipes:      [UsersPipe]
})

import { Component, Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'timePipe'
})
export class TimeValuePipe implements PipeTransform {

  transform(value: any, args?: any): any {
   var hoursMinutes = value.split(/[.:]/);
  var hours = parseInt(hoursMinutes[0], 10);
  var minutes = hoursMinutes[1] ? parseInt(hoursMinutes[1], 10) : 0;
  console.log('hours ', hours);
  console.log('minutes ', minutes/60);
  return (hours + minutes / 60).toFixed(2);
  }
}
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  order = [
    {
      "order_status": "Still at Shop",
      "order_id": "0:02"
    },
    {
      "order_status": "On the way",
      "order_id": "02:29"
    },
    {
      "order_status": "Delivered",
      "order_id": "16:14"
    },
     {
      "order_status": "Delivered",
      "order_id": "07:30"
    }
  ]
}

Invoke this module in App.Module.ts file.






angular2-pipe