Angular2:第二次避免DOM渲染

Question

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

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

注意:如果我替换ngIf为hidden那么它的工作方式已被接受,但由于许多手表和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>

Answer 1

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

• 用 隐藏组件[hidden]。
• Remove the component from the change detection tree with ChangeDetectorRef.detach()when the tab is closed.
• ChangeDetectorRef.reattach()在打开选项卡以获取最新数据时，将更改检测添加回组件。

根据您的组件的实现方式，这可以解决您的性能问题。特别是如果您严重依赖 Observables 和异步管道（正如您应该的那样），如果未检查模板的更改，则不应进行计算。

引用以下文档detach()：

想象一下，数据不断变化，每秒变化很多次。出于性能原因，我们希望每五秒检查和更新一次列表。我们可以通过分离组件的更改检测器并每五秒进行一次本地检查来做到这一点。

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

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

constructor(private changeDetector: ChangeDetectorRef) {}

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

现在您可以通过简单地设置[visible]="false"或来控制组件是否获取新数据[visible]="true"。

您可以在 ChangeDetectorRef 的官方文档中找到另一个完整示例。

Answer 2

注意：如果我用 hide 替换 ngIf ，那么它会按可接受的方式工作，但会降低性能，因为有很多手表和 DOM 与之连接。

是的，这将是您问题的完美解决方案。但是如果您遇到任何性能问题，那么您应该需要手动将滚动部分从前一个部分设置为由变量获取（使用）的网格temp。

您可能还需要这个解决方案：how to move div scrollposition based on button click in Angular 2