Question

我们在Angular 2应用程序中遇到Masonry网格问题。

我们需要在DOM准备好并加载内容后调用masonry init。我尝试了所有Angular 2生命周期事件，但它并不适用于所有场景。

我们正在使用ngrx - redux，这是我试图实现这一点的代码：

在构造函数中我从状态

获取数据

  constructor(private store: Store<IAppState>) {

        this.recommended$ = this.store
          .select('layout')
          .pluck('data');
      }

并在ngAfterViewInit我订阅了以上数据，当它到来时，我想初始化砌体网格。

 ngAfterViewInit(): void {
    this.recommended$           
      .subscribe((item: boolean) => {
        if (item) {
         new Masonry(this.masonryGrid.nativeElement, {});
        }
      });
  }

其中this.masonryGrid.nativeElement是组件模板@ViewChild('masonryGrid') masonryGrid: ElementRef;

中的div（网格）

如果我尝试打开直接装载砌体网格的路线，它就能正常工作。

但是，如果我从另一个路线进入该路线，则会发生这种情况： http://i.prntscr.com/23583025e000490c940caeb06c695890.png

可能主要原因是因为DOM没有在ngAfterViewInit()中呈现（在我们的例子中图像不是）

http://i.prntscr.com/e46e87e5cf9740b6929ebe2e8635b040.png

欢迎任何建议，我们将不胜感激。

由于

Answer 1

我正面临类似的问题。我没有一个干净的解决方案，而且看来Angular没有办法检测到这一点。同时，一种解决方法是将delay(1000)添加到RxJS链（或您认为适合情况的任何值）中，以便Angular可以在渲染DOM之前稍等片刻。

另一个昂贵的选择是添加ngDoCheck来验证元素是否已渲染，但这将在每个周期执行。

完成异步DOM渲染时的Fire函数

1 个答案: