NgIf 指令

NgIf 指令

ngIf指令根据表达式是真还是假有条件地呈现组件或元素

这里是我们的应用程序组件，我们将ngIf指令绑定到一个示例组件。

@Component({
  selector: 'app',
  template: `
    <button type="button" (click)="toggleExists()">Toggle Component</button>
    <hr/>
    <if-example *ngIf="exists">
      Hello
    </if-example>
  `
})
export class AppComponent {
  exists: boolean = true;
  toggleExists() {
    this.exists = !this.exists;
  }
}

查看示例
单击按钮将切换IfExampleComponent是否为DOM的一部分，而不仅仅是它是否可见。这意味着每次点击按钮时，IfExampleComponent将被创建或销毁。这可能是有昂贵的创建/销毁操作的组件的问题。例如，一个组件可以有一个大的子子树或构造时进行多个HTTP调用。在这些情况下，如果可能，最好避免使用ngIf。

⚡️ngIf 语法在 4.0 后已经支持else。此外，条件值现在可以存储在局部变量中，供以后重用。当与async管道一起使用时特别有用。

<div *ngIf="userObservable | async; else loading; let user">
  Hello {{user.last}}, {{user.first}}!
</div>
<template #loading>Waiting...</template>

注意当使用 then 时 *ngIf 所在的元素部分将被忽略。

<element *ngIf="someExpression then thenRef else elseRef"></element>
<template #thenRef>AAA</template>
<template #elseRef>BBB</template>

NgIf指令

NgIf 指令