typescript - Angular 6 添加侧边菜单栏未打开
问题描述
我仍然是 Angular 的初学者,我使用了我的大学项目,因为Angular 6
我正在尝试实现This side nav,但它在我的项目中不起作用
那是我的代码 facilitistatus.component.html
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" (click)="open(closeNav)">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" (click)="open(openNav)">☰ open</span
facilitistatus.component.ts
openNav() {
document.getElementById('mySidenav').style.width = '250px';
}
closeNav() {
document.getElementById('mySidenav').style.width = '0';
}
facilitistatus.component.css
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
我没有看到任何错误,有人知道如何正确地做到这一点吗?
谢谢
解决方案
您正在调用错误的函数open(openNav)
。没有包含 的函数open(openNav)
。在您的 html 模板中更改打开导航栏(click)="openNav()"
而不是(click)="open(openNav)"
关闭导航栏而(click)="open(closeNav)"
不是(click)="closeNav()"
.
这是工作示例:打开关闭导航栏
推荐阅读
- python - qml 中的 QtCharts 和 Visual Studio Code 中的 pyqt6
- reactjs - Airbnb/react 日期选择器:如何禁用特定日期?
- javascript - 新节点不尊重 D3.js forceSimulation() 中的力
- cypress - 赛普拉斯:将值存储在变量中
- c# - 使用 IComparer 基于多个字段进行排序
- python - 可以使用以数字开头的 key=argument 格式化文本吗?
- java - 在 Tomcat 9 的日志文件中捕获 System.out.println?
- pokeapi - Pokeapi 获得多种口袋妖怪类型
- excel - 有没有办法使用 v 查找或具有重复查找但不同行值的不同公式?
- image - 使用 bolbs (php) 在数据库中插入和显示图像