Использование метода отсоединения ChangeDetectorRef с PrimeNg OverlayPanel - PullRequest
Новая
       17

Использование метода отсоединения ChangeDetectorRef с PrimeNg OverlayPanel

1 голос
/ 26 сентября 2019

Мы используем метод отсоединения ChangeDetectorRef для преодоления некоторых проблем с производительностью, и он работает нормально с большинством вещей, однако он также предотвращает закрытие OverlayPanel из PrimeNg, если щелкнуть где-нибудь за пределами OverlayPanel (для dismissable задано значение true),Пример 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-код и код, чтобы сделать его ближе к нашей ситуации.

1 Ответ

0 голосов
/ 26 сентября 2019

Метод cd.detach () отсоединяет представление от дерева обнаружения изменений.Отдельный вид не проверяется до тех пор, пока он не будет присоединен (наложение - это уже отсоединенный вид, и никогда не будет повторного присоединения).Используйте в сочетании с detectChanges () для реализации локальных проверок обнаружения изменений.следовательно, в этом случае это не будет применено, все же вы можете сделать это по событию click вместо того, чтобы делать это в конструкторе.для более подробной информации: https://angular.io/api/core/ChangeDetectorRef#detach

...