Question

我正在使用角度版本7为我的应用程序创建侧边栏。我想包括Java脚本以及该项目的某些功能。为此，我遵循以下步骤

我在资产文件下创建了一个js文件夹，并将其命名为SideBar.js
在SideBar.js中，我编写了一段Java脚本，如下所示。

function toggleSideBar() {
  document.getElementById("SideBar").classList.toggle('active');
}

我在angular.json
在ngonInit（）内的sidebar.component.ts文件中，我声明了该函数，如下所示。

import { Component, OnInit } from '@angular/core';

var jQuery: any;

@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.scss']
})


export class SideBarComponent implements OnInit {
  constructor() { }

  ngOnInit() {
    (function (toggleSideBar) {
      toggleSideBar('.toggleSideBar').toggleSideBar();
    })(jQuery);
  }
}

我不确定出了什么问题。我仍然无法切换我创建的侧栏。任何线索都将有所帮助。

编辑：添加辅助组件.html

<nav>
  <div id="SideBar">
    <div class="toggle-btn" onclick="toggleSideBar()">
    <span></span>
      <span></span>
      <span></span>
    </div>
    <ul>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
    </ul>
  </div>

</nav>

代码：Sidebar.component.scss

nav {
  margin: 0px;
  padding: 0px;
  font-family: 'Montserrat', sans-serif;
 #SideBar {
   position: fixed;
   width: 200px;
   height: 100%;
   background: #151719;
   left: -200px;
 }
#SideBar ul li {
  color: rgba(230,230,230,0.9);
  list-style: none;
  padding: 15px 10px;
  border-bottom: 1px solid rgba(100,100,100,0.3);
}
#SideBar .active{
  left: 0px;
}
#SideBar .toggle-btn{
  position: absolute;
  left: 230px;
  top:20px;
}
  #SideBar .toggle-btn span{
    display: block;
    width: 30px;
    height: 5px;
    background: #151719;
    margin: 5px 0px;
  }
}

Answer 1

我认为您正在使用Native JS click事件，只需使用如下所示的Angular click事件并使用该标志添加/删除类。

sidebar.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.scss']
})


export class SideBarComponent implements OnInit {

  open: boolean = true;
  constructor() { }

  ngOnInit() {  }
}

sidebar.component.html

<nav>
  <div id="SideBar" [ngClass]="{'active': open}">
    <div class="toggle-btn" (click)="open = !open">
    <span></span>
      <span></span>
      <span></span>
    </div>
    <ul>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
    </ul>
  </div>

</nav>

Answer 2

jQuery和Angular的问题

首先，这不应理解为“永远不要同时使用jQuery和Angular”。 jQuery在使用Angular时有一些合法用途，但是大多数事情都可以单独在纯Angular中处理。 Angular旨在处理DOM，从组件/元素的创建和操作到DOM事件。

改为使用[ngClass]

ngClass具有多种操作方式，可以将哪些类添加到您可以找到here的元素中。从中获得的关键一件事是，尽管ngClass可以用string, string[], Set<string>声明，但一旦删除它们，就无法将其删除。这就是为什么我们有能力使用{[klass: string]: expression}。让我们看一个例子：

app.component.html

<p [ngClass]="{'active': toggle}">
  Start editing to see some magic happen :)
</p>
<button (click)="toggle = !toggle">Toggle</button>

app.component.ts

export class AppComponent  {
  toggle: boolean = true
}

我们使用onclick而不是使用(click)，这是Angular处理DOM事件的方式。除了使用document.getElementById("SideBar").classList.toggle('active');之外，我们还使用由点击事件toggle操纵的组件属性（(click)="toggle = !toggle"）。

神奇之处在于[ngClass]="{'active': toggle}"，它的意思是“如果toggle为true，则添加类active”。我有此代码的StackBlitz示例，可以在here中找到。

在角度项目中使用JavaScript时出错

2 个答案:

jQuery和Angular的问题

改为使用[ngClass]