ドリームパートナー

SEROKUを支える技術 Angular Tips編 その3

 

さて、今回は前回予告したとおり ng-content を使った、テンプレートに対して外部から子要素を突っ込むような処理を書いてみようかと思います。

[adinserter block="1"]

Angularに置いてあまりサンプル記事がない印象ですが、使い方さえ覚えておけばきっと役に立つはずです!

Tips4 :ng-contentを使った子要素への注入

ng-contentとは、作成したコンポーネントに対して外部から要素を注入するときに使うタグです。

ng-contentを使ったシンプルな例

まずは一番簡単な例を、コードベースで書いていきたいと思います。

 

fooタグ内部に書いた要素が、まるまるng-contentと置き換わりますね。
上記の簡単な例を実装する上ではうまくいきましたが、では複数の要素を別々の場所に注入したい場合はどうすればよいでしょう?

[adinserter block="1"]

ng-contentを使い複数の要素を注入する例

ng-contentではselectアトリビュートを使い、注入するコンテンツを指定することができます。
以下のコードで複数の要素を注入したいと思います。

fooタグ内部に書いた要素の中で、Fooコンポーネントのng-contentのselectで指定した箇所にそれぞれ置き換わりますね。
ちなみに、上記の例で言うとh1タグが複数あった場合、またはheaderクラスが複数あった場合でも、selectにマッチする要素分ng-contentは置き換わります。

[adinserter block="1"]

ng-contentを使った例 応用編

上記の例はあくまでただの使い方の例だったので、どういう時に役に立つかをユースケースを交えながら書いていきたいと思います。
一つの例として、コンポーネントを作る際に、あるボタンイベントを親コンポーネントにEventEmitterを使って通知し、実際の処理は親コンポーネントでやらせているケースがあるとします。

[adinserter block="1"]

まとめ

今回は ng-content に関して書きました。
前回の記事でngTemplateOutlet にも少し触れましたが、ある特定の要素を置き換えるという場合にも複数のやり方がありますね。
(もちろんそれぞれで適切な使い所は異なりますが)

吐き出したいネタが一旦尽きてしまったので、なにか思いついたらまたアップしたいと思います。
それでは皆さんごきげんよう。

[adinserter block="1"]

 

SEROKUを支える技術 ~開発準備編~
SEROKUを支える技術~プロジェクト管理編~
SEROKUを支える技術~社内 Kubernetes 編~
SEROKUを支える技術~CI/CD編~
SEROKUを支える技術~社内 Kubernetes トラブルシュート前編~
SEROKUを支える技術 Angular Tips その1
SEROKUを支える技術 Angular Tips その2
SEROKUを支える技術 Angular Tips その3

 

モバイルバージョンを終了