Angular模板标签<ng-container>、<ng-template>

[alanhg]

No description provided.

[alanhg]

ng-template我们经常搭配ngIf指令等使用，如下:

<div *ngIf="isList;else elseBlock">
    <ul>
        <li *ngFor="let item of items">
            <a routerLink='../detail/{{item.id}}' [queryParams]="{title:item.title}">
                {{item.title}}
            </a>
        </li>
    </ul>
</div>
<ng-template #elseBlock>
    <div>
        分组浏览
    </div>
</ng-template>

但是，这样子，比如为true时候，我们生成的code中是会多了个if所谓的标签div，有时候我们是不需要这个的，如何不额外增加div标签呢,答案是使用ng-container标签。

<ng-container *ngIf="isList;else elseBlock">
    <ul>
        <li *ngFor="let item of items">
            <a routerLink='../detail/{{item.id}}' [queryParams]="{title:item.title}">
                {{item.title}}
            </a>
        </li>
    </ul>
</ng-container>
<ng-template #elseBlock>
    <div>
        分组浏览
    </div>
    <div *ngFor="let i of [1,2,3]">
        <h3> {{i}}</h3>
    </div>
</ng-template>

[alanhg]

注意

如上代码如果这样子去写，if块中内容就不会正常显示

<ng-template *ngIf="isList;else elseBlock">
    <ul>
        <li *ngFor="let item of items">
            <a routerLink='../detail/{{item.id}}' [queryParams]="{title:item.title}">
                {{item.title}}
            </a>
        </li>
    </ul>
</ng-template>
<ng-template #elseBlock>
    <div>
        分组浏览
    </div>
    <div *ngFor="let i of [1,2,3]">
        <h3> {{i}}</h3>
    </div>
</ng-template>

原因，ng-template目的是声明一个模板，本身并不是个容器

相关issue