NgIf 指令

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

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

  1. @Component({
  2. selector: 'app',
  3. template: `
  4. <button type="button" (click)="toggleExists()">Toggle Component</button>
  5. <hr/>
  6. <if-example *ngIf="exists">
  7. Hello
  8. </if-example>
  9. `
  10. })
  11. export class AppComponent {
  12. exists: boolean = true;
  13. toggleExists() {
  14. this.exists = !this.exists;
  15. }
  16. }

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

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

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

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

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