Как использовать элемент ng-container в Angular

Введение

ng-container — это элемент, доступный в Angular 2+, который может действовать как хост для структурных директив.

В этой статье вы изучите сценарии, которые можно решить с помощью ng-container.

Предпосылки

Если вы хотите следовать этой статье, вам понадобятся:

• Знакомство со структурой DOM. Чтобы узнать больше, ознакомьтесь с серией руководств Understanding the DOM.
• Некоторое знакомство со структурными директивами Angular также может быть полезным.

Использование ng-container для предотвращения избыточных элементов

В Angular вы не можете использовать более одной привязки шаблона к элементу.

Этот пример, объединяющий структурные директивы *ngIf и *ngFor, не будет компилироваться:

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

Попытка скомпилировать этот код приведет к следующей ошибке:

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

Одним из обходных путей может быть разделение привязок шаблона и создание оболочки:

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

Недостатком этого подхода является то, что он вводит в DOM избыточный элемент div:

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 истинно, это приведет к следующей разметке:

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

Замена элемента span на ng-container уменьшит количество избыточных элементов span, добавленных в DOM:

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

Если error истинно, это приведет к следующей разметке:

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

Уменьшение количества разметки в вашем приложении в конечном итоге приводит к уменьшению дерева DOM и может помочь избежать побочных эффектов с помощью селекторов каскадных таблиц стилей.

Использование ng-container для обеспечения действительных стандартов HTML

ng-container также может решить проблему недопустимой разметки HTML в ситуациях, когда использование div или span не будет допустимым HTML.

В следующем примере будет создан недопустимый HTML-код, поскольку ожидается, что элементы li будут прямыми дочерними элементами элемента ul:

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 позволит удовлетворить более строгие тесты и требования и обеспечить поддержку в разных браузерах и на разных устройствах.

Заключение

В этой статье вы рассмотрели проблемы, которые ng-container решает в ваших приложениях Angular, такие как избыточные элементы и недействительные стандарты HTML.

Если вы хотите узнать больше об Angular, ознакомьтесь с нашей темой по Angular, где вы найдете упражнения и проекты по программированию.