코드에서 파이프를 사용할 수 있습니까?


103

템플릿에서 내 사용자 지정 파이프를 사용하면 다음과 같습니다.

{{user|userName}}

그리고 그것은 잘 작동합니다.

코드에서 파이프를 사용할 수 있습니까?

나는 이것을 다음과 같이 사용하려고합니다.

let name = `${user|userName}`;

그러나 그것은 보여줍니다

userName이 정의되지 않았습니다.

내 대안 db.collection.findOne()은 코드에서 수동으로 사용 하는 것입니다. 하지만 현명한 방법이 있습니까?


이와 같은 템플릿을 사용할 수 없습니다. 파이프를
Yoann Prot

죄송합니다. 분명히 말씀 드리겠습니다. 나는 이미 파이프를 주입
Hongbo Miao

코드에서 사용하려는 파이프는 무엇입니까? 이것이 당신의 맞춤형 파이프입니까?
Siva

1
...Angular에 의해 실행되지 않기 때문에 할 수 있다고 생각하지 않습니다 . 그것의 ES6 문자열 보간 ...
티에리 Templier

5
이것이 도움이되는지 확인하십시오. stackoverflow.com/questions/35144821/…
Siva

답변:


112

먼저 providers모듈 에서 파이프를 선언하십시오 .

import { YourPipeComponentName } from 'your_component_path';

@NgModule({
  providers: [
    YourPipeComponentName
  ]
})
export class YourServiceModule {
}

그런 다음 다음 @Pipe과 같은 구성 요소에서 사용할 수 있습니다 .

import { YourPipeComponentName } from 'your_component_path';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

  YourFunction(value) {
    this.pipe.transform(value, 'pipeFilter');
  }
}

1
멋지네요! 그러나 어떤 이유로 든 의존성 주입은 문제없이 HTML에서 사용할 수 있지만 생성자에 파이프를 주입 할 수 없습니다. 다른 모듈에서 선언되고 내보내집니다. 제공자 목록에도 있어야합니까? 하지만 MyPipe의 새 인스턴스를 만들고 사용하는 것은 작동합니다. DI에만 문제가 있습니다 ...
Sam

19
@Sam 실제로 providers. 추가 YouPipeComponentName하면 providers이 방법이 완벽하게 작동합니다.
SrAxi

4
또한 올바른 공급자에 추가해야합니다. 파이프를 전역 적으로 사용하려면 app.module 공급자에 넣으십시오. 느리게로드 된 일부 모듈에서만 사용하려면 해당 모듈의 공급자에 넣으십시오
Phil

잘못된 가져 오기 경로입니다. @ angular / common 아래에서 파이프를 사용할 수 없습니다.
안드리

@Andris 내가 그것을 편집했습니다. 그건 실수 였어. 내 말은 파이프 모듈을 가져와야 함을 의미합니다.
saghar.fadaei

107

@Siva가 정확합니다. 그리고 감사합니다!

따라서 구성 요소에서 파이프를 사용하는 방법은 다음과 같습니다.

let name = new UserNamePipe().transform(user);

링크 다른 유사한 질문에.


3
이것은 작동하지만 아마도 Angular 모범 사례 / 선호하는 패턴을 따르지 않을 것입니다. 다른 답변에서 설명한 것처럼 파이프를 구성 요소 종속성으로 생성자에 전달하는 것이 "더 옳습니다".
Josh

이 방법을 사용하면 성능 문제가 없습니까? 어떤 사람들은 항상 그것을 사용할 수 있습니다!
Mohammad Kermani

2
이것은 파이프를 사용하는 완전히 잘못된 방법입니다. 파이프는 특수 목적 클래스이며 Angular에서 제공하는 특수 수단을 통해 사용해야합니다. 파이프에 구현 된 일부 기능이 필요하지만 일반 TypeScript 클래스와 같은 방식으로 사용하는 경우 해당 regular클래스 를 만들고 TS 코드에서 사용해야합니다 ( your-component.ts예 :) . 파이프에서 동일한 기능이 필요한 경우 항상 regular파이프에서도 해당 클래스를 사용할 수 있습니다 .
Alexander Abakumov

가장 큰 차이점은 이런 방식으로 클래스의 더 많은 인스턴스를 생성한다는 것입니다. Angular 구문을 사용하면 singelton처럼 동작하며 한 번만 인스턴스화됩니다.
Sir2B
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.