在Angular + Bulma CSS框架中定义 Navbar menu 事件

在Angular + Bulma CSS框架中定义 Navbar menu 事件

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- navbar items, navbar burger... -->
  </div>
  <div class="navbar-menu">
    <!-- navbar start, navbar end -->
  </div>
</nav>
``

The navbar-menu is hidden on touch devices < 1024px . You need to add the modifier class is-active to display it.

```

And here is another implementation example, which again toggles the class is-active on both the navbar-burger and the targeted navbar-menu, but this time in jQuery.

$(document).ready(function() {

  // Check for click events on the navbar burger icon
  $(".navbar-burger").click(function() {

      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      $(".navbar-burger").toggleClass("is-active");
      $(".navbar-menu").toggleClass("is-active");

  });
});

Angular:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { RouterOutlet } from '@angular/router';

export class AppComponent {
  @ViewChild('navMenu') navMenu: ElementRef;
 Navbar() {
    // this.navBurger.nativeElement.classList.toggle('is-active'); 
    this.navMenu.nativeElement.classList.toggle('is-active');
  }
}

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>

    <a (click)="toggleNavbar()" role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasic">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasic" class="navbar-menu" #navMenu>
    <div class="navbar-start">
      <a class="navbar-item">
        Home
      </a>
    </div>
 </div>
</nav>

ViewChild 是属性装饰器，用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit 钩子函数调用前完成，因此在 ngAfterViewInit 钩子函数中，就能正常获取查询的元素。

参考链接

https://semlinker.com/viewchild-and-viewchildren/