'' Borusu açısal2 özel boru bulunamadı

Bu hatayı düzeltemiyorum. Bir arama çubuğum ve bir ngFor'm var. Şunun gibi özel bir boru kullanarak diziyi filtrelemeye çalışıyorum:

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

Kullanım:

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

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

Hata:

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)">

Açısal versiyonlar:

"@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"

Bir "çapraz modül" sorunuyla karşılaşmadığınızdan emin olun

Boruyu kullanan bileşen boru bileşenini "global" olarak bildiren modüle ait değilse boru bulunmaz ve bu hata mesajını alırsınız.

Benim durumumda boruyu ayrı bir modülde beyan ettim ve bu boru modülünü boruyu kullanan bileşenlere sahip başka herhangi bir modüle ithal ettim.

Boruyu kullandığınız bileşenin,

Boru Modülü

 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: [],
      };
   }
 } 

Başka bir modülde kullanım (örn. App.module)

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

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

Borunuzu modül bildirimine eklemeniz gerekir:

declarations: [ UsersPipe ],
providers: [UsersPipe]

Ionic için @Karl'ın bahsettiği gibi birden fazla sorunla karşılaşabilirsiniz. İyonik tembel yüklenen sayfalar için kusursuz çalışan çözüm şudur:

1. Şu dosyalarla borular dizini oluşturun: borular.ts ve borular.module.ts

// pipe.ts içeriği (içinde birden fazla boru olabilir, sadece şunu unutmayın:

use @Pipe function before each class)
import { PipeTransform, Pipe } from "@angular/core";
@Pipe({ name: "toArray" })
export class toArrayPipe implements PipeTransform {
  transform(value, args: string[]): any {
    if (!value) return value;
    let keys = [];
    for (let key in value) {
      keys.push({ key: key, value: value[key] });
    }
    return keys;
  }
}

// borular.module.ts içeriği

import { NgModule } from "@angular/core";
import { IonicModule } from "ionic-angular";
import { toArrayPipe } from "./pipes";

@NgModule({
  declarations: [toArrayPipe],
  imports: [IonicModule],
  exports: [toArrayPipe]
})
export class PipesModule {}

2. PipesModule'ü app.module ve @NgModule içe aktarmalar bölümüne dahil edin

   import { PipesModule } from "../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] });

3. Özel kanalları kullanmak istediğiniz her .module.ts dosyanıza PipesModule ekleyin. İthalatlar bölümüne eklemeyi unutmayın. // Misal. dosya: sayfalar / özel-sayfam / özel-sayfam.module.ts

   import { PipesModule } from "../../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] })

4. Bu kadar. Artık şablonunuzda özel borunuzu kullanabilirsiniz. Örn.

<div *ngFor="let prop of myObject | toArray">{{ prop.key }}</div>

Yukarıdaki "çapraz modül" cevabını durumuma çok yardımcı buldum, ancak dikkate alınması gereken başka bir kırışıklık olduğu için bu konuyu genişletmek isterim. Bir alt modülünüz varsa, testimde üst modüldeki boruları da göremez. Bu nedenle ayrıca kendi ayrı modüllerine boru koymanız gerekebilir.

Alt modülde görünmeyen boruları ele almak için attığım adımların bir özeti:

1. (Üst) SharedModule'dan boruları alın ve PipeModule'a koyun
2. SharedModule'da, PipeModule'ü içe aktarın ve dışa aktarın ( PipModule'a otomatik olarak erişim sağlamak için SharedModule'a bağlı diğer uygulama bölümleri için)
3. Sub-SharedModule için, PipeModule'ü içe aktarın, böylece diğer sorunların yanı sıra döngüsel bir bağımlılık sorunu yaratacak olan SharedModule'u yeniden içe aktarmak zorunda kalmadan PipeModule'a erişim elde edin.

Yukarıdaki "çapraz modül" cevabına başka bir dipnot: PipeModule'u oluşturduğumda forRoot statik yöntemini kaldırdım ve paylaşılan modülümde bu olmadan PipeModule'u içe aktardım. Temel anlayışım, forRoot'un filtreler için zorunlu olarak geçerli olmayan tekil senaryolar için yararlı olduğudur.

Bir öne süren alternatif buraya cevabı:

Boru için ayrı bir modül yapmak gerekli değildir , ancak kesinlikle bir alternatiftir. Resmi dokümanlar dipnotunu kontrol edin: https://angular.io/guide/pipes#custom-pipes

Özel borunuzu yerleşik borularla aynı şekilde kullanırsınız.
Borunuzu AppModule'un declarations dizisine dahil etmelisiniz. Borunuzu bir sınıfa enjekte etmeyi seçerseniz, bunu NgModule'unuzun sağlayıcılar dizisinde sağlamalısınız.

Yapmanız gereken tek şey, borunuzu bildirim dizisine ve sağlayıcılar dizisini module, Boruyu kullanmak istediğiniz yere eklemektir .

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

Not: Yalnızca açısal modüller kullanmıyorsanız

Bazı nedenlerden dolayı bu belgelerde yok, ancak özel boruyu bileşene aktarmak zorunda kaldım

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.

Kanallarımın bulunduğu dizinde borular için bir modül oluşturdum

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

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

    export class SharedPipeModule { }   

Şimdi bu modülü app.module'a içe aktarın:

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

Şimdi iç içe modüle içe aktararak kullanılabilir