ไม่พบท่อ "" ไปป์แบบกำหนดเอง angular2

ดูเหมือนจะแก้ไขข้อผิดพลาดนี้ไม่ได้ ฉันมีแถบค้นหาและ ngFor ฉันกำลังพยายามกรองอาร์เรย์โดยใช้ไปป์ที่กำหนดเองดังนี้:

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

การใช้งาน:

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

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

ข้อผิดพลาด:

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

รุ่นเชิงมุม:

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

ตรวจสอบให้แน่ใจว่าคุณไม่ประสบปัญหา "ข้ามโมดูล"

หากส่วนประกอบที่ใช้ไปป์ไม่ได้เป็นของโมดูลที่ประกาศส่วนประกอบไปป์ "ทั่วโลก" แสดงว่าไม่พบไพพ์และคุณได้รับข้อความแสดงข้อผิดพลาดนี้

ในกรณีของฉันฉันได้ประกาศไปป์ในโมดูลแยกต่างหากและนำเข้าโมดูลท่อนี้ในโมดูลอื่น ๆ ที่มีส่วนประกอบโดยใช้ท่อ

ฉันได้ประกาศว่าส่วนประกอบที่คุณใช้ท่อคือ

โมดูลท่อ

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

การใช้งานในโมดูลอื่น (เช่น app.module)

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

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

คุณต้องรวมไปป์ของคุณในการประกาศโมดูล:

declarations: [ UsersPipe ],
providers: [UsersPipe]

สำหรับ Ionic คุณสามารถเผชิญกับปัญหาต่างๆตามที่ @Karl กล่าวถึง วิธีแก้ปัญหาที่ทำงานได้อย่างไม่มีที่ติสำหรับหน้าที่โหลดแบบอิออนคือ:

1. สร้างไดเร็กทอรีไปป์ด้วยไฟล์ต่อไปนี้: pip.tsและpip.module.ts

// เนื้อหา pipe.ts (สามารถมีหลายท่อภายในได้อย่าลืม

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

// เนื้อหา pip.module.ts

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 และ @NgModule

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

3. รวม PipesModule ไว้ใน. module.ts แต่ละอันที่คุณต้องการใช้ไปป์แบบกำหนดเอง อย่าลืมเพิ่มลงในส่วนการนำเข้า // ตัวอย่าง. ไฟล์: pages / my-custom-page / my-custom-page.module.ts

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

4. แค่นั้นแหละ. ตอนนี้คุณสามารถใช้ไปป์ที่กำหนดเองในเทมเพลตของคุณ เช่น

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

ฉันพบว่าคำตอบ "โมดูลไขว้" ข้างต้นมีประโยชน์มากสำหรับสถานการณ์ของฉัน แต่ต้องการขยายความเนื่องจากมีริ้วรอยอื่นที่ต้องพิจารณา หากคุณมีโมดูลย่อยก็จะมองไม่เห็นท่อในโมดูลหลักในการทดสอบของฉัน ด้วยเหตุนี้คุณอาจต้องใส่ท่อลงในโมดูลแยกต่างหาก

นี่คือสรุปขั้นตอนที่ฉันดำเนินการเพื่อแก้ไขไปป์ที่ไม่ปรากฏในโมดูลย่อย:

1. นำท่อออกจาก (parent) SharedModule และใส่ลงใน PipeModule
2. ใน SharedModule ให้นำเข้า PipeModule และส่งออก (สำหรับส่วนอื่น ๆ ของแอปที่ขึ้นอยู่กับ SharedModuleเพื่อเข้าถึง PipeModule โดยอัตโนมัติ)
3. สำหรับ Sub-SharedModule ให้นำเข้า PipeModule เพื่อให้สามารถเข้าถึง PipeModule ได้โดยไม่ต้องนำเข้า SharedModule ซ้ำซึ่งจะสร้างปัญหาการพึ่งพาแบบวงกลมท่ามกลางปัญหาอื่น ๆ

เชิงอรรถอีกประการหนึ่งสำหรับคำตอบของ "โมดูลข้าม" ข้างต้น: เมื่อฉันสร้าง PipeModule ฉันได้ลบเมธอดแบบคงที่ forRoot และนำเข้า PipeModule โดยไม่มีสิ่งนั้นในโมดูลที่ใช้ร่วมกันของฉัน ความเข้าใจพื้นฐานของฉันคือ forRoot มีประโยชน์สำหรับสถานการณ์เช่น singletons ซึ่งไม่ได้ใช้กับตัวกรองเสมอไป

แนะนำคำตอบอื่นที่นี่:

ไม่จำเป็นต้องสร้างโมดูลแยกต่างหากสำหรับ Pipe แต่เป็นทางเลือกที่แน่นอน ตรวจสอบเชิงอรรถของเอกสารอย่างเป็นทางการ: https://angular.io/guide/pipes#custom-pipes

คุณใช้ท่อแบบกำหนดเองแบบเดียวกับที่คุณใช้ท่อในตัว
คุณต้องรวมไปป์ของคุณในอาร์เรย์การประกาศของ AppModule หากคุณเลือกที่จะฉีดไปป์ของคุณในคลาสคุณต้องระบุไว้ในอาร์เรย์ผู้ให้บริการของ NgModule ของคุณ

สิ่งที่คุณต้องทำคือเพิ่มไปป์ของคุณไปยังอาร์เรย์การประกาศและอาร์เรย์ผู้ให้บริการในmoduleตำแหน่งที่คุณต้องการใช้ Pipe

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

หมายเหตุ:เฉพาะในกรณีที่คุณไม่ได้ใช้โมดูลเชิงมุม

ด้วยเหตุผลบางอย่างสิ่งนี้ไม่ได้อยู่ในเอกสาร แต่ฉันต้องนำเข้าไปป์ที่กำหนดเองในส่วนประกอบ

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.

ฉันได้สร้างโมดูลสำหรับไปป์ในไดเร็กทอรีเดียวกับที่มีไพพ์ของฉันอยู่

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

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

    export class SharedPipeModule { }   

ตอนนี้นำเข้าโมดูลนั้นใน app.module:

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

ตอนนี้สามารถใช้ได้โดยการนำเข้าสิ่งเดียวกันในโมดูลที่ซ้อนกัน