Angularでng-container要素を使用する方法

序章

ng-containerは、Angular 2+で利用可能な要素であり、構造ディレクティブのホストとして機能できます。

この記事では、ng-containerで対処できるシナリオについて説明します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

• DOMの構造に精通していること。 詳細については、チュートリアルシリーズDOMの理解をご覧ください。
• Angularテンプレートおよび構造ディレクティブにある程度精通していることも役立つ場合があります。

ng-containerを使用して冗長な要素を回避する

Angularでは、要素に複数のテンプレートバインディングを使用することはできません。

*ngIfと*ngForの構造ディレクティブを組み合わせたこの例では、コンパイルされません。

Invalid Example<div *ngIf="todos" *ngFor="let todo of todos">
  {{ todo.content }}
</div>

このコードをコンパイルしようとすると、次のエラーが発生します。

Invalid Example OutputCan't have multiple template bindings on one element. Use only one attribute prefixed with *

回避策の1つは、テンプレートバインディングを分離し、ラッパーを作成することです。

Valid Example<div *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{ todo.content }}
  </div>
</div>

欠点の1つは、このアプローチでは、冗長なdiv要素がDOMに導入されることです。

Valid Example Output<div>
  <div>
    Todo Content 1
  </div>
  <div>
    Todo Content 2
  </div>
  <div>
    Todo Content 3
  </div>
</div>

ここで、ng-container要素が役立ちます。

以下はまったく同じように動作しますが、実行時にDOMに要素を追加する必要はありません。

Improved Valid Example<ng-container *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{ todo.content }}
  </div>
</ng-container>

これにより、次のマークアップが生成されます。

Improved Example Output<div>
  Todo Content 1
</div>
<div>
  Todo Content 2
</div>
<div>
  Todo Content 3
</div>

ng-containerは、ngIfがインラインコンテンツで使用されている場合にも役立ちます。

Example<div>
  <span *ngIf="error">Oops:</span> {{ message }}
</div>

errorがtrueの場合、次のマークアップが生成されます。

Example Output<div>
  <span>Oops:</span> An error occurred.
</div>

span要素をng-containerに置き換えると、DOMに追加される冗長なspan要素が減ります。

Improved Example<div>
  <ng-container *ngIf="error">Oops:</ng-container> {{ message }}
</div>

errorがtrueの場合、次のマークアップが生成されます。

Improved Example Output<div>
  Oops: An error occurred.
</div>

アプリケーションのマークアップの量を減らすと、最終的にDOMツリーが小さくなり、カスケードスタイルシートセレクターの副作用を回避するのに役立ちます。

ng-containerを使用して有効なHTML標準を確認する

ng-containerは、divまたはspanの使用が有効なHTMLではない状況での無効なHTMLマークアップの問題を解決することもできます。

次の例では、li要素がul要素の直接の子であると想定されているため、無効なHTMLが生成されます。

Invalid Example<ul>
  <div *ngFor="let todo of todos">
    <li *ngIf="todo.content !== 'Done'">
      {{ todo.content }}
    </li>
  </div>
</ul>

divをng-containerに置き換えると、次の問題が解決します。

Valid Example<ul>
  <ng-container *ngFor="let todo of todos">
    <li *ngIf="todo.content !== 'Done'">
      {{ todo.content }}
    </li>
  </ng-container>
</ul>

有効なHTMLを使用すると、より厳しいテストと要件を満たし、ブラウザとデバイス間でのサポートが保証されます。

結論

この記事では、冗長要素や無効なHTML標準など、Angularアプリケーションでng-containerが対処する問題について説明しました。

Angularについて詳しく知りたい場合は、Angularトピックページで演習とプログラミングプロジェクトを確認してください。