ng-container
既不是一个Component
,也不是一个Directive
,只是单纯的一个特殊tag
。
这点类似于template
,Angular
复用了HTML5
规范中template
的tag
的语义,不过并没有真正利用其实现,因此在审查元素中是永远也找不到一个template
元素的。
不过,由于ng-container
并不是HTML5
中的,为了保持区分度,采用了ng-
作为前缀。所以现在我们可以知道,ng-container
是Angular
所定义的一个特殊tag
。
基本使用
-
1、基本的
ng
代码<div> <ng-container> <p>This is paragraph 1.</p> <p>This is paragraph 2.</p> </ng-container> </div>
-
2、运行后的结果
<div> <p>This is paragraph 1.</p> <p>This is paragraph 2.</p> </div>
-
3、常见的使用场景
<ul class="book-list"> <ng-container *ngFor="let book of books"> <li class="book-item">{{ book.title }}</li> <li class="book-item">{{ book.author }}</li> <li class="book-item">{{ book.price }}</li> </ng-container> </ul>