Question

我正在玩Angular2并尝试执行以下操作：

显示项目列表
当项目在DOM中完成加载时，调用外部库以某种方式格式化项目，例如砖石。

我熟悉Backbone Marionette，所以使用它，我可能会使用onShow方法。使用Angular2，我可以做些什么来检查DOM是否完全呈现，以便我可以调用下一个JS方法？

代码段：

@Component({
  selector: 'my-views',
  templateUrl: 'app/views/views.component.html',
  styleUrls: ['app/views/views.component.css'],
  directives: [HeaderComponent]
})

export class ViewsComponent implements OnInit {
  ...

  ngOnInit() {
    this.user = new User();

    if (this.user.session_id) {
      this.getList();
    } else {
      this.router.navigate(['login']);
    }
  }

  ngAfterViewInit() {
    var elem = document.querySelector('.grid');
    var colWidth = document.querySelector('.grid-size');

    var msnry = new Masonry(elem, {
      // options
      itemSelector: '.grid-item',
      columnWidth: colWidth,
      percentPosition: true
    });
  }

  getList() {
    this.getList(this.user)
      .then(Array => {
        this.myViews = Array;
      });
  }

}

我在ngAfterViewInit钩子里放了一个断点，当它被击中时，DOM还没有显示列表。我知道我在钩子里面的代码是有效的，因为当我在成功渲染列表后在控制台中运行相同的代码片段时，它会成功运行。

Answer 1

Angular2中有几个生命周期钩子：https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

我想你会想要使用：AfterViewInit

Answer 2

您可以尝试以下生命周期挂钩之一：

export class demoComponent{
    //called fter initializing the component's views and child views 
    ngAfterViewInit(){
    }
    //after every check of the component's views and child views
    ngAfterContentInit(){
    }
    //after projecting content into the component.
    ngAfterViewChecked(){
    }
}

是否有一个方法可以在Angular2中完全呈现模板时使用？

2 个答案: