Angular移动端折叠导航栏点击不展开问题及代码集成咨询

在Angular框架中，小屏幕下导航栏会折叠为汉堡图标，但点击该图标无法展开导航链接。以下纯HTML代码可正常实现该功能，但将JavaScript代码放入assets目录下的JS文件中引入到Angular项目后，功能失效，需要了解如何在Angular中正确集成该导航栏功能。

纯HTML可正常运行的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Responsive Navigation Bar - Devbabu.Com</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <div class="wrapper">
            <div class="logo">
                <a href="#"><img src="logo.png" alt="DevBabu.com"></a>
            </div>
            <div class="navbar">
                <div class="close-nav"><button>×</button></div>
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <div class="menu-bar">
                <button><i></i></button>
            </div>
        </div>
    </header>
    <div class="container">
        <!-- Content -->
    </div>
    <script>
        const theBody = document.querySelector('body');
        const openNav = document.querySelector('.menu-bar button');
        const closeNav = document.querySelector('.close-nav button');
        const Navbar = document.querySelector('.navbar');

        function showHide(){
            Navbar.classList.toggle('show');
            // bodyScroll();
        }

        openNav.onclick = showHide;
        closeNav.onclick = showHide;
    </script>
</body>
</html>

方式一：使用Angular组件化逻辑（推荐） #

Angular不推荐直接操作原生DOM，建议通过组件的模板引用和生命周期钩子实现功能：

1. 创建导航栏组件（示例：header.component） #

模板文件（header.component.html）

<header>
    <div class="wrapper">
        <div class="logo">
            <a href="#"><img src="assets/logo.png" alt="DevBabu.com"></a>
        </div>
        <div #navbar class="navbar">
            <div class="close-nav"><button (click)="showHide()">×</button></div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
        <div class="menu-bar">
            <button (click)="showHide()"><i></i></button>
        </div>
    </div>
</header>

组件类文件（header.component.ts）

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  @ViewChild('navbar') navbar!: ElementRef<HTMLDivElement>;

  showHide(): void {
    this.navbar.nativeElement.classList.toggle('show');
    // 如需控制body滚动，可在此添加逻辑：
    // document.body.classList.toggle('no-scroll');
  }
}

2. 引入样式 #

将原style.css内容复制到header.component.css中，或者将style.css放入assets目录，在angular.json的styles数组中添加路径：

"styles": [
  "src/styles.css",
  "src/assets/style.css"
],

方式二：适配原生JS代码（不推荐） #

若需保留原有JS逻辑，需确保代码在Angular DOM渲染完成后执行：

1. 修改JS代码为函数形式（assets/nav.js） #

export function initNavbar() {
    const openNav = document.querySelector('.menu-bar button');
    const closeNav = document.querySelector('.close-nav button');
    const Navbar = document.querySelector('.navbar');

    if (openNav && closeNav && Navbar) {
        function showHide(){
            Navbar.classList.toggle('show');
        }
        openNav.onclick = showHide;
        closeNav.onclick = showHide;
    }
}

2. 在组件生命周期钩子中调用 #

import { Component, AfterViewInit } from '@angular/core';
import { initNavbar } from '../../assets/nav.js';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    initNavbar();
  }
}

失效原因说明 #

原代码无法工作的核心问题：

• Angular组件DOM是封装的，原生document.querySelector可能无法获取组件内部元素
• JS代码执行时机过早，导航栏元素尚未被Angular渲染到页面，导致获取到的元素为null，无法绑定点击事件

内容的提问来源于stack exchange，提问作者user20843725