• NgIf 指令

    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>