Question

我有角度项目。包含使用cdn实现css和js。由于navbar是我项目中的组件之一，因此无法在index.html中使用script标签初始化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)
  }

  .....

}

Answer 2

我真的建议您使用官方的Angular Material包来在Angular5项目中使用材质设计。它与角度有很好的集成，您不需要在index.html中设置任何JavaScript设置。

您可以使用非常清晰的设置指南和良好的文档在Angular Material site中了解更多信息。

关于你的问题，使用Angular Material，你可以得到一个有效的方法：

<mat-sidenav-container class="example-container">
  <mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
  <mat-sidenav-content>Main content</mat-sidenav-content>
</mat-sidenav-container>

请记住在app.module.ts。

中正确导入sidenav模块

Answer 3

如果你想在angular 5项目中使用materialize库，我强烈建议你看一下angular2-materialize，而不是简单地从CDN导入JS和CSS。

您只需导入app.module中的模块，即可访问所有具体化元素。

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

3 个答案: