如何使用 Angular 8 实现物化导航栏

Question

我是 Angular 新手，我已通过

将物化框架添加到我的 Angular 应用程序中

npm install materialize-css --save 
npm install jquery --save
npm install --save hammerjs

我的问题是如何以角度实现物化导航栏？到目前为止我尝试过的是：

<ul id="dropdown1" class="dropdown-content">
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
  </ul>
  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <!-- Dropdown Trigger -->
        <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
      </ul>
    </div>
  </nav>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var elems = document.querySelectorAll('.dropdown-trigger');
    var instances = M.Dropdown.init(elems, options);
  });

</script>

但它不起作用，我也尝试过这样的jquery

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
  <script>
    $(document).ready(function () {
$(".dropdown-trigger").dropdown();

    });
  </script>

Answer 1

我建议使用Angular Material。

在components 部分，您可以找到几个材质组件，例如menu，可用作主导航栏。

一个最小的例子如下所示：

<mat-menu #appMenu="matMenu">
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Help</button>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>more_vert</mat-icon>
</button>

查看 Menu 的示例以获得一些想法：

https://material.angular.io/components/menu/examples

此外，您还可以使用多个初始存储库来了解 Angular 如何与 Material 一起使用，例如angular-ngrx-material-starter

---

如果你坚持使用materializecss，可以使用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)
  }

  .....

}