在 angular 项目中使用 javascript 时出错

Question

我正在使用 angular 版本 7 为我的应用程序创建一个边栏。我想为这个项目包含具有某些功能的 java 脚本。为此，我遵循了以下步骤

我在assets文件下新建了一个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

我认为您使用的是原生 JS 点击事件，只需使用如下所示的 Angular 点击事件和 add/remove class 使用标志。

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，从 components/elements 的创建和操作到甚至 DOM 事件。

改为使用 [ngClass]

ngClass 有多种方法可以控制将哪些 class 添加到您可以找到 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
}

我们使用 (click) 而不是 onclick，这是 Angular 处理 DOM 事件的方式。而不是使用 document.getElementById("SideBar").classList.toggle('active'); 我们使用一个组件属性 (toggle) 被点击事件操纵：(click)="toggle = !toggle".

魔术发生在 [ngClass]="{'active': toggle}" 中，它说“如果切换为真，则添加 class active”。我有此代码的 StackBlitz 示例，可以在 here.

中找到

在 angular 项目中使用 javascript 时出错

error while using a javascript in angular project

javascript

jquery

angular

angular7

jQuery 和 Angular

改为使用 [ngClass]