ошибка при использовании JavaScript в угловом проекте

Question

Я создаю боковую панель для своего приложения, используя угловую версию 7. Я хотел включить java-скрипт с некоторыми функциями для этого проекта.для этого я выполнил следующие шаги

1. Я создал папку js под файлом ресурсов и назвал ее SideBar.js

2. На боковой панели.js Я написал фрагмент сценария Java, как показано ниже.

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

Я добавил путь Jquery к скриптам в angular.json

В моем файле sidebar.component.ts внутри ngonInit () я объявил функциюкак показано ниже.

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

Проблема с 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 мы используем (click), который является способом Angular обрабатывать события DOM.И вместо использования document.getElementById("SideBar").classList.toggle('active'); мы используем свойство компонента (toggle), которым манипулирует событие click: (click)="toggle = !toggle".

Магия происходит в [ngClass]="{'active': toggle}", который говорит: «Если переключениеtrue, затем добавьте класс active ".У меня есть пример этого кода в StackBlitz, который можно найти здесь .

Answer 2

Я думаю, что вы используете событие щелчка 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>