当一个选项卡中的数据很大时，mat-tab 组件会滞后。我们怎样才能解决这个问题？

Question

我在 angular 10 中使用 mat-tab，组件使用 ComponentFactoryResolver 动态渲染，并使用此方法将组件推送到数组中。

for ex: 
componentArr.push(this.insertComponent(ProfileComponent));
componentArr.push(this.insertComponent(DataComponent));
componentArr.push(this.insertComponent(PaymentComponent));

private insertComponent<T>(component: any): T {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory<T>(component);
    return this.tabHost.viewContainerRef.createComponent<T>(componentFactory).instance;
  }

现在我有一个包含非常大数据的组件，它在切换选项卡时使 mat-tab 延迟。

我应该尝试哪种不同的方法？

Answer 1

分享我解决这个问题后的方法。在我的例子中，我有很多 HTML 数据导致 Mat-tab.

出现滞后问题

为了解决这个问题，我将数据分成几个部分并使用 mat-expansion-panel 并且默认情况下保持所有部分折叠，因此 mat-tab 组件的 HTML 减少了，当我展开时一个特定的部分，只会显示所需的 HTML。

注意：mat-expansion-panel 默认设置内部内容的属性为 'display: none' 这不会从 [=35= 中删除 html ].而是在单击扩展面板时有条件地添加 html。

我在 angular 中使用 'ngIF' 是为了不在 DOM 中包含 html。

当一个选项卡中的数据很大时，mat-tab 组件会滞后。我们怎样才能解决这个问题？

mat-tab component is lagging when data inside one tab is huge. How can we solve that?

angular-material

angular

mat-tab