时间戳

首页 > 解决方案 > Angular 是否会记住内联 *ngIf 条件语句？

angular - Angular 是否会记住内联 *ngIf 条件语句？

问题描述

Angular 是否会记住内联 *ngIf 条件语句？如果我有例如：

<form [formGroup]="form" *ngIf="inputModels.length < 200">

每次更改检测运行时都会重新计算“inputModels.length < 200”，还是将其存储到 inputModel 更改？

标签： angular

解决方案

是的，Angular 会为您解决这个问题！

这种机制之所以有效，是因为 Angular 会为每个组件生成一个factory。

组件工厂主要由编译器通过模板解析生成的视图节点组成。

由于工厂组件是一个很大的话题，我将只停留在这个函数上：updateRenderer

updateRenderer需要时注意更新组件的 DOM 。

默认情况下，每个组件都添加到一个TreeRenderList对象数组中。Angular 将该数组用于很多事情。在我个人看来，最重要的两个特征是这两个：

  • 更新组件的 DOM。
  • 当组件改变时更新组件的绑定

当组件更改时更新组件的绑定，这是什么意思？

让我们举一个简单的例子来解释这一点。

    export class AppComponent {
      @Input() myInput: string;
    }

<p>{{myInput}}

我们知道每次myInput更改我们都会看到相关 html 中的更改（默认情况下）。这有效，因为TreeRenderListandupdateRenderer功能。

我可以阻止 Angular 更新组件的 DOM 吗？

是的！这很容易。如果我们使用 cli ( ng g c component-name) 生成一个组件，它的装饰器将是这样的：

@Component({
    selector: 'my-component',
    templateUrl: 'xxx.component.html',
    styleUrls: ['xxx.component.css'],
})

但是我们可以指定很多属性。其中之一是changeDetection。

默认情况下，Angular 使用该Default策略，这意味着框架将决定如何以及何时更新组件的 DOM。

我们可以将其更改为OnPush. 通过这样做，我们告诉 Angular 它不需要在其逻辑上更新组件的 DOM。将此属性添加到装饰器，结果如下：

 @Component({
        changeDetection: ChangeDetectionStrategy.OnPush,
        selector: 'my-component',
        templateUrl: 'xxx.component.html',
        styleUrls: ['xxx.component.css'],
    })

如果我们现在尝试更新@Input，我们将看不到任何更改。这就是ChangeDetectionRef我们提供帮助的地方。为了使用它，我们需要将inject它放入组件中，我们可以使用它this.changeDetectionRef.detectChanges()以编程方式告诉 Angular 更新组件的 DOM。

我在这里写了一个深入的指南ChangeDetectionRef，如果你想阅读它：https ://medium.com/@sciampi.jacopo/angular-performances-a-guide-to-change-detection-b8a02c0b7b00

推荐阅读