代码之家 › 专栏 › 技术社区 › Mikz

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

angular7 angular jquery javascript

-1

Mikz · 技术社区 · 6 年前

我正在使用角度版本7为应用程序创建侧栏。我想把Java脚本包含在这个项目中的某些函数中。为此,我遵循以下步骤

我在assets文件下创建了一个js文件夹,并将其命名为sidebar.js。
在SIDBAR.JS中,我写了一段Java脚本,如下所示。

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

我在angular.json中向脚本添加了jquery的路径。
在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;
  }
}

2 回复 | 直到 6 年前

Niral Munjariya 6 年前

我认为您使用的是本地JS click事件,只需使用下面的angular click事件,并使用标记添加/删除类。

边栏.组件.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() {  }
}

边栏.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>

Colby Hunter 6 年前

jquery和angular的问题

首先,这并不意味着要理解为“永远不要同时使用jquery和angular”。jquery在使用angular时有一些合法的用途,但是 大多数事情都可以单独以纯角度处理。 . Angular用于处理DOM,从组件/元素的创建和操作到甚至是DOM事件。

改为使用[NgClass]

ngClass 有多种方法可以控制哪些类可以添加到元素中 here . 从中得到的一个关键是 NG级 可以用声明 string, string[], Set<string> 一旦他们被重视,他们就不能被移除。这就是为什么我们有能力使用 {[klass: string]: expression} . 让我们来看一个例子:

app.component.html(应用程序组件.html)

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

应用组件.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 .