Question

我正在处理一个有角度的6项目。我有一个包含7个标签的页面，并通过一个服务呼叫获取这些数据。为了方便地操作这些选项卡的内容，我创建了7个组件，并从父级进行渲染。这7个标签包含大量数据，由于json的复杂性而无法应用分页。执行焦点，单击，更改等操作的速度变得如此缓慢。我已经听说过并尝试过使用' changeDetection：ChangeDetectionStrategy.OnPush '，但它的速度变慢了一些，但是某些功能是从父选项卡启动的，无法反映那些子组件。请帮助我解决该问题。

Answer 1

在使用它之前，请确保您了解changeDetection：ChangeDetectionStrategy.OnPush-它可能会有一些陷阱。使用changeDetection时：ChangeDetectionStrategy.OnPush角度停止跟踪所有更改。从现在开始，角度仅在事件发生，输入数据已更改或触发更改检测时才检测更改。这是一个解释：A Comprehensive Guide to angular change detection strategy和这是demo

对于所有其他更改（包括您在事件处理程序中在实际事件之后发生的更改），您必须使用ChangeDetectorRef手动触发更改检测：

constructor(cdRef: ChangeDetectorRef) {}

changeYourModel() {
  // do some stuff
  this.cdRef.markForCheck();
}

changeDetection：ChangeDetectionStrategy.OnPush的优点是，您可以定义触发更改检测的时刻。如果没有changeDetection：ChangeDetectionStrategy.OnPush，角度值可能多次更改，但徒劳无益，因为下一次更改即将发生。 ChangeDetectionStrategy.OnPush的另一件事是，它封装了更改，因为在每次更改时都不会更新/检测到整个掩码。

您可以通过将组件划分为许多较小的组件来封装对该组件所做的更改来使用它。如您在demo中所见，更改检测可检测在同一树级别上进行的更改。因此，将您的组件划分为7个选项卡组件还不够。制作一个逻辑组件并将其放入（按下时）标签容器组件中，以防止更改传播到其他组件。

此外，请查看Chrome开发者工具中的“性能”标签，然后运行一些性能测试以查看实际花费的时间。还可以查看“网络”标签，查看是否需要进行每个呼叫，或者是否可以将某些内容装入并缓存。

Answer 2

此方法适用于材料设计选项卡，但也可以将其用于选项卡。通过在ng-template中声明主体，它会延迟加载，因此当用户单击此选项卡时。

<mat-tab-group>
  <mat-tab label="First">
    <ng-template matTabContent>
      The First Content
    </ng-template>
  </mat-tab>
  <mat-tab label="Second">
    <ng-template matTabContent>
      The Second Content
    </ng-template>
  </mat-tab>
</mat-tab-group>

如何加快用户界面

2 个答案: