Question

我将我的大学类项目用于angular6和ng bootstrap，我尝试为我的项目实施此Sidenav，但它不能正确添加。任何人都知道如何正确添加我的项目

facilitistatus.component.html

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" (click)="open(closeNav)">&times;</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)">&#9776; open</span>

facilitistatus.component.ts

 open(openNav) {
    document.getElementById('mySidenav').style.width = '250px';
  }

  open(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;}
}

我遇到以下错误

src / app / facilitistatus / facilitistatus.component.ts（33,11）中的
ERROR：错误TS2393：功能重复。 src / app / facilitistatus / facilitistatus.component.ts（44,3）：错误 TS2393：功能重复。 src / app / facilitistatus / facilitistatus.component.ts（50,3）：错误 TS2393：功能重复。 src / app / facilitistatus / facilitistatus.component.ts（61,11）：错误 TS2393：功能重复。 src / app / facilitistatus / facilitistatus.component.ts（75,5）：错误 TS2393：功能重复。 src / app / facilitistatus / facilitistatus.component.ts（79,3）：错误 TS2393：复制功能实现。

Answer 1

错误消息将其说明：重复功能。 Javascript没有函数重载。相反，您的方法需要使用不同的名称。

openNav() {
  document.getElementById('mySidenav').style.width = '250px';
}

closeNav() {
  document.getElementById('mySidenav').style.width = '0';
}

Answer 2

我在 src / app / facilitistatus / facilitistatus.component.ts

中看到

**open(openNav)** {
    document.getElementById('mySidenav').style.width = '250px';
  }

  **open(closeNav)** {
    document.getElementById('mySidenav').style.width = '0';
  }

**需要修改

1）将方法重命名为

**openNav()** {
    document.getElementById('mySidenav').style.width = '250px';
  }

  **closeNav()** {
    document.getElementById('mySidenav').style.width = '0';
  }

.html绑定中的用法类似。

2）使用@ angular / common中的DOCUMENT作为服务，然后使用javascript播放。请参阅链接以添加文档

[How to inject Document in Angular 2 service ]

Answer 3

您应该尝试将div的宽度从0调整为250px，而不是将其宽度调整为250px，并在关闭模式下给其transform:transalteX(-250px)，在打开模式下给其translateX(0) 在打开和关闭两种情况下，请提供一个不同的类来标识模式。

// By Default, close mode
.sidenav {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    transform : translateX(-250px);
}

// Open mode
.sidenav.open {
    transform : translateX(0);
}

这是用于打开和关闭side-nav，是的，方法重载问题已在其他答案中得到解决。并将此handleNav方法与布尔变量一起使用

handleNav(isOpen: boolean) {
  document.getElementById('mySidenav').classList.remove('open');
  if(isOpen)
  document.getElementById('mySidenav').classList.add('open');
}

Angular 6无法正确添加Java脚本

3 个答案: