angular - 带有 ResizeObserver 的 ViewContainerRef 在 Angular 上无法正常工作

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 似乎无法保留引用并在 body 的 with 离开时创建 SidebarComponent 的新实例 < 768px至 >= 768px并且不会删除以前创建的保存在 sidebarRef 中的组件，并且 sidebarContainer.clear() 方法不起作用

奇怪的是，如果我使用 window.addEventListener('resize'...有用。

是否有一些我不知道的潜在 ResizeObserver 技术，有没有办法让它与 ResizeObserver 一起工作

更新

我忘了提到这一点，但是调整大小观察器中的代码会按时执行并适本地调用这两个函数。

else 部分总是创建 SidebarComponent 的新实例并将其呈现到 View 中，但是 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 example .

如果您只关心视口(viewport)尺寸的变化，则无需使用 ResizeObserver。窗口 resize 事件将在所有浏览器中正常工作。