ngIf不使用ng-template

Question

我想在Angular 4中显示或隐藏一个基于布尔值的模板。

-这是在Home.Component.HTML内部

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

-这是在HomeComponent内部

   isSummaryViewVisbile: boolean = true;

上面的代码不起作用，它总是隐藏模板，尽管我赋值为true。

提前谢谢。

Answer 1

ng-template是一个用于呈现HTML的角度元素。它永远不会直接显示。事实上，在渲染视图之前，Angular会用comment.If替换模板及其内容没有结构指令，您只需在ng-template中包装一些元素，这些元素就会消失。

<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元素，并将其封装在host元素周围。例如

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

会被转换成-

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

现在，正如我们所看到的，内部ng-template将总是隐藏它的内容，我希望这是清楚的。

演示：https://plnkr.co/edit/yB7PKx?p=preview

Answer 2

根据Mohit的回答/评论，你的代码是有效的……如果要将内容分配给ng-template标记，它应该会显示出来。