[angular] Angular2 : 사용자 지정 파이프를 찾을 수 없습니다.

Question 1

내장 파이프는 작동하지만 사용하려는 모든 사용자 정의 파이프는 동일한 오류입니다.

파이프 ‘actStatusPipe’를 찾을 수 없습니다.

[오류->] {{data.actStatus | actStatusPipe}}

두 가지 방법을 시도했으며 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
        }
    }
}

문서와 거의 동일하다고 생각합니다.

그리고 내 angular2의 버전은 2.1입니다.

stackOverflow 및 google에서 검색 할 수있는 많은 솔루션이 내 앱에서 시도되지만 작동하지 않습니다.

이로 인해 많이 혼란 스러웠습니다. 답변 해 주셔서 감사합니다!

Question 2

이것이 나를 위해 일하는 것을보십시오.

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

이 모듈에서 직접 파이프를 사용할 수 있습니다. 그러나 파이프가 두 개 이상의 구성 요소에서 사용된다고 생각되면 내 접근 방식을 따르는 것이 좋습니다.

파이프를 만듭니다.
별도의 모듈을 만들고 하나 이상의 파이프를 선언하고 내 보냅니다.
파이프 모듈을 사용하십시오.

파이프를 사용하는 방법은 프로젝트 복잡성과 요구 사항에 따라 다릅니다. 전체 프로젝트에서 한 번만 사용 된 파이프가 하나만있을 수 있습니다. 이 경우 파이프 / s 모듈 (모듈 접근 방식)을 생성하지 않고 직접 사용할 수 있습니다.

Question 3

이것은 나를 위해 일하지 않았습니다. (Im Angular 2.1.2). app.module.ts에서 MainPipeModule을 가져 오지 않고 파이프를 사용하는 구성 요소 Im도 가져 오는 모듈에서 대신 가져옵니다.

구성 요소가 선언되고 다른 모듈에서 가져온 경우 해당 모듈에도 PipeModule을 포함해야합니다.

Question 4

나는 확실히 도움이 되었기 때문에 받아 들여지는 대답에 문제가 없습니다. 그러나 그것을 구현 한 후에도 여전히 같은 오류가 발생했습니다.

이것은 내 구성 요소에서도 파이프를 잘못 호출했기 때문입니다.

내 custom-pipe.ts 파일 :

@Pipe({ name: 'doSomething' })
export class doSomethingPipe implements PipeTransform {
    transform(input: string): string {
        // Do something
    }
}

지금까지는 훌륭했지만 component.html 파일에서 다음과 같이 파이프를 호출했습니다.

{{ myData | doSomethingPipe }}

파이프를 찾을 수 없다는 오류가 다시 발생합니다. Angular는 파이프 데코레이터에 정의 된 이름으로 파이프를 조회하기 때문입니다. 따라서 내 예에서 파이프는 대신 다음과 같이 호출되어야합니다.

{{ myData | doSomething }}

어리석은 실수지만 상당한 시간이 소요되었습니다. 도움이 되었기를 바랍니다!

Question 5

정말 멍청한 대답 (나는 잠시 후 투표 할 것입니다), 그러나 이것은 나를 위해 일했습니다.

파이프를 추가 한 후에도 오류가 계속 발생하고 ” ng serve“를 사용하여 Angular 사이트를 실행중인 경우 중지하고 다시 시작하십시오.

나를 위해 다른 제안은 효과가 없었지만 단순히 중지했다가 ” ng serve“을 ( 를) 다시 시작하는 것만으로도 오류가 사라졌습니다.

이상한.

Question 6

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

이 문을 파이프 모듈에 추가하면 내 문제가 해결되었습니다.

Question 7

다른 모듈에서 파이프를 선언하는 경우 해당 모듈의 선언 및 내보내기 배열에 파이프를 추가 한 다음 해당 파이프를 사용하는 모듈에서 해당 모듈을 가져옵니다.

Question 8

파이프에 대한 선언이 한 모듈에서 수행되고 다른 모듈에서 파이프를 사용하는 동안 파이프를 사용하는 클래스가있는 현재 모듈에서 올바른 가져 오기 / 선언을 제공해야합니다. 제 경우에는 그것이 파이프 미스의 이유였습니다.