您好，我正在 Angular 6 中使用 flex box 和 bem 方法创建响应式导航栏，我为移动设备添加了汉堡菜单。但它在这里不起作用是我所拥有的。
HTML:
<div class="Navbar">
<div class="Navbar__Link Navbar__Link-brand">
Website title
</div>
<div class="Navbar__Link Navbar__Link-toggle">
<i class="fa fa-bars"></i>
</div>
<nav class="Navbar__Items">
<div class="Navbar__Link">
Longer Link
</div>
<div class="Navbar__Link">
Longer Link
</div>
<div class="Navbar__Link">
Link
</div>
</nav>
<nav class="Navbar__Items Navbar__Items--right">
<div class="Navbar__Link">
Link
</div>
<div class="Navbar__Link">
Link
</div>
</nav>
</div>
这是我的完整 CSS 代码
body {
margin: 0
}
.Navbar {
background-color: #46ACC2;
display: flex;
padding: 16px;
font-family: sans-serif;
color: white;
}
.Navbar__Link {
padding-right: 8px;
}
.Navbar__Items {
display: flex;
}
.Navbar__Items--right {
margin-left:auto;
}
.Navbar__Link-toggle {
display: none;
}
@media only screen and (max-width: 768px) {
.Navbar__Items,
.Navbar {
flex-direction: column;
}
.Navbar__Items {
display:none;
}
.Navbar__Items--right {
margin-left:0;
}
.Navbar__ToggleShow {
display: flex;
}
.Navbar__Link-toggle {
align-self: flex-end;
display: initial;
position: absolute;
cursor: pointer;
}
}
Here is my js for toggle
function classToggle() {
const navs = document.querySelectorAll('.Navbar__Items')
navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
}
document.querySelector('.Navbar__Link-toggle').addEventListener('click', classToggle);
和index.html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Majeni</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script src="./assets/js/toggle.js" type="text/javascript"></script>
</body>
</html>
NOTE
我在纯 html 和 js 中创建了相同的导航栏，一切正常这里是工作的 fiddle :Menu with Hamburger using BEM and flex Box
但是在我的 Angular 应用程序中，当我运行该应用程序时，我在浏览器控制台中收到以下错误，
toggle.js:7 Uncaught TypeError: Cannot read property 'addEventListener' of null
我做错了什么？
最佳答案
在 Angular 应用程序中不要使用 JQuery 或 JS 原生 api Angular 有一种方法来处理 dom 操作
使用指令添加和删除类
import { Directive,HostListener,HostBinding } from '@angular/core';
@Directive({
selector: '[appSidebar]',
exportAs:'appSidebar'
})
export class SidebatDirective {
@HostBinding('class.is-open') click=false;
constructor() { }
@HostListener('click') onClic(){
this.click=!this.click;
}
}
关于javascript - 未捕获的类型错误 : Cannot read property 'addEventListener' of null Angular 6，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51796096/