[解決済み] Angular2：カスタムパイプが見つからない

質問

内蔵のパイプは動作するのですが、使いたいカスタムパイプがすべて同じエラーになります。

パイプ 'actStatusPipe' が見つかりませんでした。

[ERROR ->]{{data.actStatus | actStatusPipe}}が見つかりませんでした。

app.moduleのdeclarationsで宣言する、2つの方法を試しました。

app.module.tsで宣言します。

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

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

または、他のモジュールを使って、すべてのパイプを宣言し、エクスポートします。 //パイプ

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

ドキュメントとほぼ同じだと思います（実際、ドキュメントをコピーして少し修正しただけです）。

また、私のangular2のバージョンは2.1です。

stackOverflowやgoogleで検索できる多くの解決策を私のアプリで試しましたが、うまくいきません。

これは私を非常に混乱させました、あなたの答えに感謝します!

どのように解決するには？

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

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

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

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. そのパイプのモジュールを使用する。

パイプをどのように使うかは、プロジェクトの複雑さと要件に完全に依存します。プロジェクト全体で一度だけ使うパイプがあるかもしれません。