angular2入門【パイプ編②】

こんにちわ
ゼットンです。

前回はangular2の組み込みパイプについて
扱いました。
今回のテーマはカスタムパイプです。

カスタムパイプ

カスタムパイプとは
独自に定義したパイプです。
例えば前回UpperCaseパイプやDateパイプを
使ってサクッと表記の変更をしました。
あのような機能を勝手に作れちゃうんですね。
もちろん変換部分はそれぞれで実装が必要ですが。
ではやってみましょう。

まずは例によって、ng newをした直後の
Hello world状態からスタート。

app-rootタグの中身です。
デフォルト状態だとコンポーネント内が分割されて見通しが悪いので、
1ファイルにまとめてあります。ここは気になさらず。

ではapp-rootタグと同じ階層に
カスタムパイプ用のtsファイルを追加しましょう。
名前は「hina.pipe.ts」でいきましょうか。

中身はこんな感じで実装してみました。

カスタムパイプは@angular/coreからPipeとPipeTransformを
インポートして作成します。
@Pipeのnameプロパティにパイプの名前を指定しています。
中の実装については、簡単すぎるので説明しません。
後の動作確認で全てわかります。

ではこのパイプを使うために、
app-rootタグの中身をちょこっと変えちゃいます。

画面は以下のような感じ。
テキストボックスに入力すると・・・

即座に画面に描画されるようになっています。
inputタグに#inputという形で
Template Syntaxを付加し、
pタグ内でバリューを取り出しているという実装です。
ここについては追々詳しく話せたらと思います。
そんで、今回はパイプ！ですね。
ここに、先ほど作成したhinaパイプを実装してみます。
とは言っても簡単です。こんな感じ。

ファイルをimportして
組み込みパイプと同じようにパイプ名で呼び出しています。
パイプ名は先ほど@Pipeのnameプロパティに
設定してあげた名前です。

そんで画面を見てみると・・・

おやぁ？
Loadingから動きません。
これはエラってるやーつですね。
F12を押してコンソールを確認すると

大丈夫！
おいたんに任せろ！
このエラーは前に見たことあるぞ！！(前々回を参照)

このエラーの原因は、

カスタムパイプをモジュールに追加していないから

です。

というわけで、
hinaパイプをモジュールに追加してやりましょう。
app.module.tsに追記します。

コンポーネントと同様に、
パイプを追加した場合もモジュールのdeclationsに追加
してあげないといけません。
これでhinaパイプが使えるようになりました。

では、動作確認をしましょう。

まずは誤動作しないか、
適当な文字列を入力しましょう。

大丈夫ですね。
ひなパイプは反応してません。

こちらも大丈夫です。
ひなパイプは反応してません。

では、
最後に「ひな」と入力してみます。

ドクン・・・ッ

キターーーーーーーーーーーーーーーーーーーー！！！！

次回はディレクティブでも扱いますか。