-1

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

  1. 我在 assets 文件下创建了一个 js 文件夹并将其命名为 SideBar.js

  2. 在 SideBar.js 中，我编写了一段 java 脚本，如下所示。

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

  1. 我将 Jquery 的路径添加到 angular.json 中的脚本中

  2. 在 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;
  }
}
4

2 回答 2

1

我认为您正在使用 Native JS 点击事件，只需使用下面的 Angular 点击事件并使用标志添加/删除类。

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>
于 2019-01-04T10:14:19.253 回答
1

jQuery 和 Angular 的问题

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

改用 [ngClass]

ngClass有多种方法可以操作将哪些类添加到您的元素中，您可以在此处找到。从中得到的一个关键是，虽然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我们没有使用which(click)是 Angular 处理 DOM 事件的方式。而不是使用，我们使用由点击事件操作document.getElementById("SideBar").classList.toggle('active');的组件属性（ ） ：。toggle(click)="toggle = !toggle"

魔术发生在[ngClass]="{'active': toggle}"说“如果切换为真，则添加类active”。我有这个代码的 StackBlitz 示例，可以在这里找到。

于 2019-01-04T10:31:57.180 回答