ViewContainerRef с ResizeObserver не работает должным образом в угловых

Question

Я пытаюсь динамически добавлять и удалять компоненты в зависимости от размера экрана, используя ComponentFactoryResolver .

@ViewChild('sidebarContainer', { read: ViewContainerRef }) sidebarContainer: ViewContainerRef;

_handleBodyResize() {
let self = this;
if (typeof ResizeObserver == 'undefined') return;

const obs = new ResizeObserver(entries => {
  let entry = entries[0];

  if ((entry.contentRect.width) < MOBILE_WIDTH) {
    if (this.deviceType !== DeviceType.mobile) {
      this.removeSidebar();

      this.deviceType = DeviceType.mobile;
    }
  } else {
    if (this.deviceType !== DeviceType.desktop) {
      this.addSidebar();

      this.deviceType = DeviceType.desktop;
    }
  };
});

removeSidebar() {
  this.sidebarContainer.clear();
  this.sidebarRef.destroy();
}

addSidebar() {
this.sidebarContainer.clear();
//_cfr is componentFactoryResolver
const compFactory = this._cfr.resolveComponentFactory(this.array[0]);

let comp = this.sidebarContainer.createComponent(compFactory);

this.sidebarRef = comp;
}

и HTML

<div class="sidebar-container">
<div #sidebarContainer>

</div>

Этот sidebarContainer viewContainerRef не может удерживать ссылки и создает новый экземпляр SidebarComponent всякий раз, когда значение тела изменяется с < 768px на >= 768px, и не удаляет ранее созданный компонент, сохраненный в sidebarRef и событие sidebarContainer.clear () метод не работает

Странно, если я использую window.addEventListener('resize'..., это работает.

Есть ли какая-то базовая ResizeObserver техническая информация, о которой я не знаю, и есть ли способ заставить ее работать с ResizeObserver

Обновление

Я забыл упомянуть об этом, но код внутри наблюдателя изменения размера выполняется вовремя и вызывает обе функции соответствующим образом.

Раздел else всегда создает новый экземпляр SidebarComponent и отображает его, но this.sidebarContainer.clear() и this.sidebarRef.destroy не удаляют ранее созданные экземпляры, хотя во время отладки я вижу, что sidebarContainer и sidebarRef не являются неопределенными и являются соответствующими экземплярами ViewContainerRef и ComponentRef соответственно.

Answer 1

Angular выполняет обнаружение изменений в ответ на различные триггеры.События DOM, ajax-запросы и таймеры / наблюдаемые вызовут обнаружение изменений Angular.

Событие resize окна является примером события DOM, которое инициирует обнаружение изменений.

НасколькоЯ знаю, что обнаружение изменений Angular не автоматически вызывается ResizeObserver.Поэтому вам нужно явно указать Angular для обнаружения изменений, используя ChangeDetectorRef.detectChanges():

constructor(private changeDetector: ChangeDetectorRef) {}

ngAfterViewInit() {
  const obs = new ResizeObserver(entries => {
    // Perform updates in response to resize

    // Then tell Angular to detect changes
    this.changeDetector.detectChanges();
  });
  obs.observe(this.resizeDiv.nativeElement);
}

Вот пример StackBlitz .

ЕслиВы заботитесь только об изменениях размеров области просмотра, нет необходимости использовать ResizeObserver.Событие window resize будет работать во всех браузерах.