ng如果不使用ng-template

Question

我想基于Angular 4中的布尔值显示或隐藏模板.下面是HTML和代码

---这是在Home.Component.HTML中

<ng-template [ngIf]="isSummaryViewVisbile" #pricebookView ></ng-template>

----这是在HomeComponent中

   isSummaryViewVisbile: boolean = true;

上面的代码不起作用,它总是隐藏模板,虽然我指的是真的.

提前致谢.

Answer 1

ng-template是用于呈现HTML的Angular元素.它永远不会直接显示.事实上,渲染视图之前,角取代了其与comment.If内容不存在结构性的指令,你只是包裹在NG-模板中的一些元素,这些元素消失.

<p>Hip!</p>
<ng-template>
  <p>Hip!</p> //would disappear
</ng-template>
<p>Hooray!</p>

所以下面的代码可以正常工作

isSummaryViewVisbile = true;

<ng-template [ngIf]="isSummaryViewVisbile" #pricebookView >
       Hello world.
</ng-template>

但是如果用*ngIf替换[ngIf],相同的代码将无效.

因为在内部,Angular将*ngIf属性转换为包含主机元素的ng-template元素.例如

<ng-template *ngIf="isSummaryViewVisbile" #pricebookView >
       Hello world.
</ng-template>

将转换为 -

<ng-template [ngIf]="isSummaryViewVisbile">
      <ng-template #pricebookView >
           Hello world.
    </ng-template>
</ng-template>

现在我们可以看到内部ng-template将始终隐藏它的内容.我希望这清楚.