Angular 6 无法正确添加 java 脚本

Question

我将我的大学 ty 项目用于 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;}
}

我得到以下错误

ERROR in src/app/facilitistatus/facilitistatus.component.ts(33,11): error TS2393: Duplicate function implementation. src/app/facilitistatus/facilitistatus.component.ts(44,3): error TS2393: Duplicate function implementation. src/app/facilitistatus/facilitistatus.component.ts(50,3): error TS2393: Duplicate function implementation. src/app/facilitistatus/facilitistatus.component.ts(61,11): error TS2393: Duplicate function implementation. src/app/facilitistatus/facilitistatus.component.ts(75,5): error TS2393: Duplicate function implementation. src/app/facilitistatus/facilitistatus.component.ts(79,3): error TS2393: Duplicate function implementation.

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。参考 Link 文档添加

[ ]

Answer 3

不要将 div 的宽度从 0 调整到 250px，您应该尝试保持宽度为 250px，并且在关闭模式下给它一个 transform:transalteX(-250px)，在打开模式下，提供它translateX(0) 在打开和关闭的情况下，提供添加不同的 class 来标识模式。

// 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');
}

Angular 6 无法正确添加 java 脚本

Angular 6 to cant add java script correctly

typescript

angular

angular6