Không thể tìm thấy đường ống '' đường ống tùy chỉnh angle2

Tôi dường như không thể sửa lỗi này. Tôi có một thanh tìm kiếm và một ngFor. Tôi đang cố gắng lọc mảng bằng cách sử dụng một đường ống tùy chỉnh như sau:

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

Sử dụng:

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

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

Lỗi:

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

Phiên bản Angular:

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

Đảm bảo rằng bạn không gặp phải sự cố "mô-đun chéo"

Nếu thành phần đang sử dụng đường ống, không thuộc mô-đun đã khai báo thành phần đường ống "toàn cục" thì không tìm thấy đường ống và bạn nhận được thông báo lỗi này.

Trong trường hợp của tôi, tôi đã khai báo đường ống trong một mô-đun riêng biệt và nhập mô-đun ống này vào bất kỳ mô-đun nào khác có các thành phần sử dụng đường ống.

Tôi đã khai báo rằng thành phần mà bạn đang sử dụng đường ống là

mô-đun ống

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

Cách sử dụng trong một mô-đun khác (ví dụ: app.module)

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

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

Bạn cần đưa đường ống của mình vào khai báo mô-đun:

declarations: [ UsersPipe ],
providers: [UsersPipe]

Đối với Ionic, bạn có thể gặp nhiều vấn đề như @Karl đã đề cập. Giải pháp hoạt động hoàn hảo cho các trang tải lười ion là:

1. Tạo thư mục pipe với các tệp sau: pipe.ts và pipe.module.ts

// nội dung pipe.ts (nó có thể có nhiều đường ống bên trong, chỉ cần nhớ

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

// nội dung pipe.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. Đưa PipesModule vào phần nhập app.module và @NgModule

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

3. Bao gồm PipesModule trong mỗi .module.ts của bạn nơi bạn muốn sử dụng các đường ống tùy chỉnh. Đừng quên thêm nó vào phần nhập khẩu. // Thí dụ. file: pages / my-custom-page / my-custom-page.module.ts

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

4. Đó là nó. Bây giờ bạn có thể sử dụng đường ống tùy chỉnh trong mẫu của mình. Ví dụ.

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

Tôi thấy câu trả lời "mô-đun chéo" ở trên rất hữu ích cho tình huống của tôi, nhưng tôi muốn mở rộng về điều đó, vì có một vấn đề khác cần xem xét. Nếu bạn có một mô-đun con, nó cũng không thể nhìn thấy các đường ống trong mô-đun mẹ trong thử nghiệm của tôi. Vì lý do đó, bạn có thể cần phải đặt các đường ống vào đó mô-đun riêng biệt.

Dưới đây là tóm tắt các bước tôi đã thực hiện để giải quyết các đường ống không hiển thị trong mô-đun con:

1. Lấy đường ống ra khỏi SharedModule (cha) và đưa vào PipeModule
2. Trong SharedModule, nhập PipeModule và xuất (đối với các phần khác của ứng dụng phụ thuộc vào SharedModule để tự động có quyền truy cập vào PipeModule)
3. Đối với Sub-SharedModule, hãy nhập PipeModule, để nó có thể có quyền truy cập vào PipeModule mà không cần phải nhập lại SharedModule sẽ tạo ra vấn đề phụ thuộc vòng tròn, trong số các vấn đề khác.

Một chú thích khác cho câu trả lời "mô-đun chéo" ở trên: khi tôi tạo PipeModule, tôi đã xóa phương thức tĩnh forRoot và nhập PipeModule mà không có phương thức đó trong mô-đun được chia sẻ của tôi. Hiểu biết cơ bản của tôi là forRoot rất hữu ích cho các trường hợp như singleleton, không nhất thiết phải áp dụng cho các bộ lọc.

Đề xuất một câu trả lời thay thế ở đây:

Việc tạo một mô-đun riêng biệt cho Ống là không bắt buộc , nhưng chắc chắn là một giải pháp thay thế. Kiểm tra chú thích chính thức của tài liệu: https://angular.io/guide/pipes#custom-pipes

Bạn sử dụng đường ống tùy chỉnh của mình giống như cách bạn sử dụng đường ống lắp sẵn.
Bạn phải đưa đường ống dẫn của mình vào mảng khai báo của AppModule. Nếu bạn chọn đưa đường ống của mình vào một lớp, bạn phải cung cấp nó trong mảng nhà cung cấp của NgModule của bạn.

Tất cả những gì bạn phải làm là thêm đường ống của mình vào mảng khai báo và mảng nhà cung cấp ở modulenơi bạn muốn sử dụng Đường ống.

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

Ghi chú : Chỉ khi bạn không sử dụng mô-đun góc

Vì một số lý do, điều này không có trong tài liệu nhưng tôi đã phải nhập đường ống tùy chỉnh trong thành phần

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.

Tôi đã tạo một mô-đun cho các đường ống trong cùng thư mục nơi các đường ống của tôi hiện diện

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

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

    export class SharedPipeModule { }   

Bây giờ nhập mô-đun đó trong app.module:

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

Bây giờ nó có thể được sử dụng bằng cách nhập cùng một mô-đun lồng nhau