Angularのng-templateを使うときのメモです。
Angularとはいいながらも、ionicとかでも使います。(私はionicでなんだこれと思いながら調べてここに行き着きました)
わざわざ新しいコンポーネントを定義するほどではないけど、同じテンプレートの中で一定の記述を使い回したい時に使います。
<!-- 使いまわしたい記述を ng-template で宣言 -->
<ng-template #testTemplate let-test="test">
<p> {{ text }} </p>
</ng-template>
<!-- テンプレートを ng-container から利用する -->
<ng-container *ngTemplateOutlet="testTemplate; context:{ test: 'aaaa' }"></ng-container>
<ng-container *ngTemplateOutlet="testTemplate; context:{ test: 'bbbb' }"></ng-container>
ng-containerタグの部分は以下になります。
<p> aaaa</p> <p> bbbb</p>
ng-contenerでは *ngTemplateOutletによって、テンプレートと、contextを指定します。
context はテンプレートで使用する変数になります。
ng-templateは context から受け取る変数をlet-{context内のプロパティ}=変数名で宣言し、内部で利用できます。
あとは、<ng-container>のcontextの値を変えてHTMLに記載すれば使い回すことができます。
この方法だとTypescriptなど内部の処理を変更しないので、恐怖感はないかと思います。笑
参照
Angular > テンプレート内で、テンプレートを参照する。(ng-containerでng-templateを参照)
