コードでパイプを使用することは可能ですか?


103

テンプレートでカスタムパイプを使用すると、次のようになります。

{{user|userName}}

そして、それはうまくいきます。

コードでパイプを使用することは可能ですか?

私はそれを次のように使用しようとします:

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

しかし、それは示しています

userNameが定義されていません

私の代替方法はdb.collection.findOne()、コードで手動で使用することです。しかし、スマートな方法はありますか?


このようなテンプレートは使用できません。パイプをコントラクターに注入する必要があります
Yoann Prot

すみません、はっきりさせておきます。私はすでにパイプを注入しています
Hongbo Miao

コードで使用しようとしているパイプはどれですか?これはあなたのカスタムパイプですか?
Siva

1
...Angularによって実行されていないので、あなたができるとは思いません。それはES6文字列補間です...
ティエリーテンプリエ

回答:


111

まず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 2017

4
また、正しいプロバイダーに追加してください。パイプをグローバルに使用する場合は、app.moduleプロバイダーに配置します。一部の遅延ロードされたモジュールでのみ使用する場合は、それぞれのモジュールのプロバイダーに配置します
Phil

インポートパスが間違っています。パイプは@ angular / commonで利用できません
Andris

@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構文を使用すると、シングルトントンのように動作し、一度インスタンス化されるだけです。
Sir2B
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.