如何在 Angular 5 项目中初始化实现 sidenav？

Question

我有角度项目。包括使用 cdn 实现 css 和 js。无法使用 index.html 中的脚本标记初始化 sidenav，因为导航栏是我的项目中的组件之一。那么，在角度项目（用于生产）中包含物化 css 的最佳方法是什么，以及如何初始化像 sidenav、Carousel 等物化组件。

  var elem = document.querySelector('.sidenav');
  var instance = M.Sidenav.init(elem, options);

上面的代码用于在使用 JavaScript 时初始化 sidenav。

Answer 1

您可以使用 Angular 的“AfterViewInit”来初始化元素。在您的“ts”文件中，实现“AfterViewInit”并覆盖 ngAfterViewInit() 方法。然后在 ngAfterViewInit() 内的 setTimeout() 函数中编写初始化代码。

export class NameComponent implements OnInit, AfterViewInit {
  ....

  ngAfterViewInit(): void {
    setTimeout( function() {
      var elem = document.querySelector('.sidenav');
      var instance = M.Sidenav.init(elem, options);
    }, 0)
  }

  .....

}