角6不能正确添加java脚本

Question

我为angular6和ng bootstrap使用了我的大学ty项目，我尝试为我的项目实现这个西德纳夫，但是它不能正确地添加.any，人们知道如何正确地添加我的项目

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)：error TS2393:重复函数实现。src/app/facilitistatus/facilitistatus.component.ts(50,3)：error TS2393:重复函数实现。src/app/facilitistatus/facilitistatus.component.ts(61,11)：error TS2393:重复函数实现。src/app/facilitistatus/facilitistatus.component.ts(75,5)：error TS2393:重复函数实现。src/app/facilitistatus/facilitistatus.component.ts(79,3)：error 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)使用“角/公共”中的文档作为服务，然后播放javascript。参考链接获取文档添加

[如何在角2服务中注入文档 ]

Answer 3

与调整div的宽度从0到250‘s不同，您应该尝试保持宽度250’s，并且在关闭模式下给它一个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);
}

这是为了打开和关闭侧导航，是的方法超载问题已经解决了在其他答案。并使用这个布尔变量的handleNav方法。

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