时间戳

首页 > 解决方案 > 使用带有 PrimeNg OverlayPanel 的 ChangeDetectorRef 分离方法

angular - 使用带有 PrimeNg OverlayPanel 的 ChangeDetectorRef 分离方法

问题描述

我们正在使用 ChangeDetectorRef 的 detach 方法来克服一些性能问题，并且它在大多数情况下都可以正常工作，但是如果单击 OverlayPanel 之外的任何位置（dismissable 设置为 true），它也会阻止 PrimeNg 的 OverlayPanel 关闭。示例 html：

<h2>PrimeNG Issue Template</h2>
<button style="width: 90vw" (click)="overlayPanel.toggle($event); detectChanges();" >Show</button>

<p-overlayPanel #overlayPanel [dismissable]="true" >
  <div style="width: 40vw">Overlay panel content</div> </p-overlayPanel>

示例代码：

import { Component, ChangeDetectorRef, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
   counter: number = 0;

   constructor(private cd: ChangeDetectorRef) {
       cd.detach();
   }

   ngOnInit() {
     this.detectChanges();
   }

   detectChanges() {
     this.cd.detectChanges();
   }

   onClick() {
      this.counter++;
   }
}

在 Stackblitz 中：https ://stackblitz.com/edit/issue-primeng-template-2eb8hp

在 Stackblitz 示例中，OverlayPanel 甚至无法正确渲染，但我想我会包含它以防有人想玩它。

编辑：编辑 HTML 和代码，使其更接近我们的情况。

标签： angularprimeng

解决方案

cd.detach() 方法将视图从更改检测树中分离出来。在重新附加之前不会检查分离的视图（叠加层已经是分离的视图，永远不会重新附加）。与 detectChanges() 结合使用以实现本地更改检测检查。因此，在这种情况下，它不会被应用，您仍然可以在点击事件中执行它，而不是在构造函数中执行它。更多细节：https ://angular.io/api/core/ChangeDetectorRef#detach

推荐阅读