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

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

  

    
  
  

    
  

``

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');
  }
}

  

    
      
    

    
      
      
      
    
  

  

    

      
        Home
      
    
 

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

参考链接

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