web-dev-qa-db-ja.com

Angular2：カスタムパイプが見つかりませんでした

組み込みのパイプは動作しますが、使用したいカスタムパイプはすべて同じエラーです。

パイプ「actStatusPipe」が見つかりませんでした

[エラー->] {{data.actStatus | actStatusPipe}}

私は2つの方法を試しましたが、app.moduleの宣言で宣言してください：

app.module.ts：

import {ActStatusPipe} from '../pipe/actPipe'

@NgModule({
    declarations: [
        AppComponent,
        HomePage,
        ActivitiesList,
        ActStatusPipe
    ],
    ...
})

または、他のモジュールを使用してすべてのパイプを宣言およびエクスポートします：// pipe

import {ActStatusPipe} from "./actPipe"

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

export class MainPipe{}

app.moduleにインポートします。

//pipe
import {MainPipe} from '../pipe/pipe.module'

@NgModule({
    declarations:[...],
    imports:[...,MainPipe],
})

しかし、それらはどれも私のアプリでは動作しません。

パイプの私のコードは次のとおりです。

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

@Pipe({
    name:'actStatusPipe'
})
export class ActStatusPipe implements PipeTransform{
    transform(status:any):any{
        switch (status) {
            case 1:
                return "UN_PUBLISH";
            case 2:
                return "PUBLISH";
            default:
                return status
        }
    }
}

ドキュメントとほとんど同じだと思います

そして、私のangle2のバージョンは2.1です。

StackOverflowとgoogleで検索できる多くのソリューションが私のアプリで試されていますが、機能しません。

これは私をたくさん混乱させました、答えてくれてありがとう！

angularangular2-pipe
54
rui

これは私のために働いている参照してください。

ActStatus.pipe.ts最初はこれが私のパイプです

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

@Pipe({
  name:'actStatusPipe'
})
export class ActStatusPipe implements PipeTransform{
  transform(status:any):any{
    switch (status) {
      case 1:
        return "UN_PUBLISH";
      case 2:
        return "PUBLISH";
      default:
        return status
    }
  }
}

main-pipe.module.tsパイプモジュールでは、パイプを宣言してエクスポートする必要があります。

import { NgModule } from '@angular/core';
import {CommonModule} from "@angular/common";

import {ActStatusPipe} from "./ActStatusPipe.pipe"; // <---

@NgModule({
  declarations:[ActStatusPipe], // <---
  imports:[CommonModule],
  exports:[ActStatusPipe] // <---
})

export class MainPipe{}

app.module.ts任意のモジュールでこのパイプモジュールを使用します。

@NgModule({
  declarations: [...],
  imports: [..., MainPipe], // <---
  providers: [...],
  bootstrap: [AppComponent]
})

このモジュールでパイプを直接使用できます。しかし、パイプが複数のコンポーネントで使用されていると感じた場合は、私のアプローチに従うことをお勧めします。

  1. パイプを作成します。
  2. 別のモジュールを作成し、1つ以上のパイプを宣言してエクスポートします。
  3. そのパイプモジュールを使用します。

パイプの使用方法はプロジェクトの複雑さと要件に完全に依存します。その場合、プロジェクト全体で一度だけ使用するパイプが1つあり、パイプ/モジュールを作成せずに直接使用できます（モジュールアプローチ）。

71
Vinay Pandya

これはうまくいきませんでした。 （Angular 2.1.2を使用）。 MainPipeModuleをapp.module.tsにインポートし、代わりにパイプを使用するコンポーネントImがインポートされるモジュールにインポートする必要はありませんでした。

コンポーネントが別のモジュールで宣言およびインポートされている場合は、そのモジュールにもPipeModuleを含める必要があります。

16
Ramon Gonzalez

別のモジュールでパイプを宣言している場合は、そのモジュールをDeclarations and Exports配列に追加してから、そのパイプを消費しているモジュールにそのモジュールをインポートしてください。

0
Ross
import {CommonModule} from "@angular/common";

このステートメントをパイプモジュールに追加すると、問題が解決しました。

0
Anitta Paul