Angular2：第二次避免使用DOM渲染

发布时间：2020-12-17 08:52:15 所属栏目：安全来源：网络整理

导读：我有一个Tab控件,其中有两个选项卡.我在不同的标签中放置了两个Kendo Grid / Any组件. 当我第一次打开/选择选项卡时,它会在DOM中呈现相关的组件/ html.为了提高性能,我在选项卡上放置了ngIf以仅显示活动选项卡html.所以现在Dom只显示??活动标签html,但现在当

我有一个Tab控件,其中有两个选项卡.我在不同的标签中放置了两个Kendo Grid / Any组件.

当我第一次打开/选择选项卡时,它会在DOM中呈现相关的组件/ html.为了提高性能,我在选项卡上放置了ngIf以仅显示活动选项卡html.所以现在Dom只显示??活动标签html,但现在当我遍历其他标签并重新访问上一个标签时,它的组件/内容似乎再次渲染.我想停止第二次渲染.

注意：如果我用隐藏替换ngIf,那么它可以接受,但由于许多手表和DOM与之相关,因此性能成本很高.

实际上我的主要问题是,由于上述问题,当我导航到标签时,我的网格滚动位置每次都设置为顶部而不是它应保持在同一状态

下面是我所做的代码的一部分.

如果选项卡内容中的条件为html(仅渲染DOM中的选定选项卡)

<div class="tab-heading-outer">
    <div class="tab-heading">
        <ul id="ulOpenedTabs" class="nav nav-tabs main-tabs" role="tablist">
            <li>                 
                <span class="ellipsis"> {{tab.Header}} </span>
            </li>
        </ul>
    </div>
</div>

<div class="tab-content" *ngIf="tab.IsSelected">
    <ng-content>
    <!--Html goes here-->
    </ng-content>
</div>

如果您真的不想从DOM中删除组件并在打开选项卡时重新呈现它,则另一种解决方案可能是：

>使用[隐藏]隐藏组件.
>当选项卡关闭时,使用ChangeDetectorRef.detach()从更改检测树中删除组件.
>打开选项卡以获取最新数据时,使用ChangeDetectorRef.reattach()将更改检测添加回组件.

根据组件的实现方式,这可以解决您的性能问题.特别是如果你非常依赖于Observables和异步管道(如你所愿),如果没有检查模板的变化,就不应该进行计算.

引用detach()的文档：

Imagine the data changes constantly,many times per second. For performance reasons,we want to check and update the list every five seconds. We can do that by detaching the component’s change detector and doing a local check every five seconds.

您可以这样做,但不是基于时间,而是基于选项卡是否打开.

您所要做的就是在组件构造函数中注入ChangeDetectorRef,并将更改检测挂钩到@Input()属性：

constructor(private changeDetector: ChangeDetectorRef) {}

@Input() set visible(visible: boolean) {
  if(!visible) {
    changeDetector.detach();
  } else {
    changeDetector.reattach();
  }
}

现在,您只需设置[visible] =“false”或[visible] =“true”即可控制组件是否获取新数据.

您可以在ChangeDetectorRef的官方文档中找到另一个full example.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!