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

今天药忘吃喽~ 2023-07-13 04:21 8阅读 0赞

<nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        
      </div>
      <div class="navbar-menu">
        
      </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');
      }
    }

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

参考链接

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