ошибка TS2304: не удается найти $ в угловом компоненте 5

Question

У меня есть боковая панель навигации в угловом компоненте, которая расширяется при нажатии, аналогично this . Фрагмент HTML, используемый для создания панели навигации:

HTML:

Как следует из названия (openNav()), следующий HTML-код развернет панель навигации :

<div>
    <img (click)="openNav()" src="/imagepath" id="image">
</div>

И следующий HTML-код закроет панель навигации :

<div id="mySidenav" class="sidenav">
    <ul class="navbar-nav mr-auto" id="sidenavContent">
        <li class="nav-item" id="close-btn">
            <img class="closebtn" (click)="closeNav()" id="white-cross" src="/assets/imagepath">
        </li>
        <li class="nav-item" id="close-btn">
           <p> Item 1 </p>
        </li>
        <li class="nav-item">
            <p> Item 2 </p>
        </li>

    </ul>
</div>

Машинопись:

Используется машинопись:

openNav() 
 {
     $("#mySidenav").css("width", "50%");   // Line A
 }

 closeNav() 
 {
    $("#mySidenav").css("width", "0%");   // Line B
 }

Вышеуказанный машинописный код не включен в функцию ngOnInit().

Постановка проблемы:

Как только я введу ng serve в командной строке, я получу следующую ошибку:

ошибка TS2304: не удается найти имя '$'.

$ представляет строки ( Строка A и Строка B в машинописном тексте выше) внутри openNav () и closeNav () функций выше в машинописном тексте.

Мне интересно, каковы основные причины этой ошибки , так как иногда я получаю ошибку, а иногда нет при выполнении ng-serve .

Answer 1

Используйте style.width

<div id="mySidenav"  [style.width]="myWidthVariable+'%'" class="sidenav">
<ul class="navbar-nav mr-auto" id="sidenavContent">
    <li class="nav-item" id="close-btn">
        <img class="closebtn" (click)="closeNav()" id="white-cross" src="/assets/imagepath">
    </li>
    <li class="nav-item" id="close-btn">
       <p> Item 1 </p>
    </li>
    <li class="nav-item">
        <p> Item 2 </p>
    </li>

</ul>

И затем установите значение «myWidthVariable» в ваших методах openNav () и closeNav () (только число).

Answer 2

Это возможное решение:

HTML:

<div>
<img (click)="openNav()" src="/imagepath" id="image">
</div>
And the following HTML code will close the navbar:

<div id="mySidenav" class="sidenav" style="{{vstyle}}">
  <ul class="navbar-nav mr-auto" id="sidenavContent">
    <li class="nav-item" id="close-btn">
      <img class="closebtn" (click)="closeNav()" id="white-cross" src="/assets/imagepath">
    </li>
    <li class="nav-item" id="close-btn">
      <p> Item 1 </p>
    </li>
    <li class="nav-item">
      <p> Item 2 </p>
    </li>

  </ul>
</div>

Машинопись:

//Define a visual style variable
vstyle: = 'width:50%;';


openNav() 
 {
     vstyle = 'width:50%;';   // Line A
 }

 closeNav() 
 {
    vstyle = 'width:0%;';   // Line A
 }

Answer 3

Если вы используете jquery в файле ts, объявите $ как переменную типа any, то вы не получите ошибку.

объявляйте var $: any

Answer 4

Я предполагаю, что $ равно jQuery.Вы должны добавить jQuery к вашим зависимостям и импортировать его в файл, где вы его используете.Я бы также предложил добавить определения типов для jQuery: npm install @types/jquery --save-dev

Если вы импортируете jQuery любым другим способом, просто добавьте типы.