構造ディレクティブとは

ドキュメントを見ると以下のように定義されている。

構造ディレクティブは HTML のレイアウトを担当します。それらは、通常は要素を追加、削除、または操作することによって、 DOM の構造を構築または再構成します。

「構造ディレクティブを書く」を読みながら理解する

構造ディレクティブを書くでは NgIf の逆をおこなう UnlessDirective の作成をする。

<p *appUnless="condition">Show this sentence unless the condition is true.</p>

上記では condition が false のときに p 要素の中のメッセージが表示される。

アスタリスク接頭辞を読むと * は ng-template を使用した記述のシンタックスシュガーであることがわかる。つまり上記のコードは以下と同等になる。

<ng-template [appUnless]="condition">
  <p>Show this sentence unless the condition is true.</p>
</ng-template>

<ng-template> にもある通り <ng-template> は HTML をレンダリングするための要素であるが構造ディレクティブなしでは実施に表示はされない。

そのため構造ディレクティブがどのように <ng-template> を表示しているか見ていく。

構造ディレクティブを自作するためには TempalteRef と ViewContainerRef が必須になる。

TemplateRef は <ng-template> の内容を取得することができる。

取得した内容は ViewContainerRef を通して埋め込むことができる。(埋め込んだ view を clear することも可能)