как реализовать материализовать навбар с угловой 8

Question

Я новичок в angular, и я добавил материализованный фреймворк в мое угловое приложение по

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

. Мой вопрос: как я могу реализовать материализацию navbar в угловых?то, что я пробовал до сих пор:

<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

Я бы предложил использовать Угловой материал .

В разделе компоненты вы можете найти несколько компонентов материала, таких как 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 работает вместе с материалом, например angular-ngrx-material-starter

---

Если вы настаиваете на использовании для использования materializecss может использовать 'AfterViewInit' angular для инициализации элементов.В вашем файле 'ts' реализуйте 'AfterViewInit' и переопределите метод ngAfterViewInit ().Затем напишите свой код инициализации внутри функции setTimeout () внутри ngAfterViewInit ().

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

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

  .....

}