[英]error TS2304: cannot find $ in angular 5 component
I have a side-navbar in angular component which expands on click similar to this . 我在角度组件中有一个侧导航栏,它在类似于此的点击上展开。 The HTML snippet used to create the navbar is :
用于创建导航栏的HTML代码段为:
HTML: HTML:
As the name( openNav()
) suggests, the following HTML code will expand the navbar : 正如名称(
openNav()
)所示,以下HTML代码将展开导航栏 :
<div>
<img (click)="openNav()" src="/imagepath" id="image">
</div>
And the following HTML code will close the navbar : 以下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>
Typescript: 打字稿:
The typescript used is: 使用的打字稿是:
openNav()
{
$("#mySidenav").css("width", "50%"); // Line A
}
closeNav()
{
$("#mySidenav").css("width", "0%"); // Line B
}
The above typescript code is not included in the ngOnInit()
function. 上述打字稿代码不包含在
ngOnInit()
函数中。
Problem Statement : 问题陈述 :
As soon as I do ng serve
on my command prompt, I get the following error: 当我做
ng serve
我的命令提示符下,我收到以下错误:
error TS2304: Cannot find name '$'.
错误TS2304:找不到名称'$'。
The $ represents the lines ( Line A and Line B in the typescript above) inside openNav() and closeNav() functions above in the typescript. $表示打字稿中上面的openNav()和closeNav()函数中的行(上面打字稿中的行A和行B )。
I am wondering what are the primary reasons behind that error as sometimes I get the error and sometimes I don't while doing ng-serve . 我想知道这个错误背后的主要原因是什么, 因为有时我得到错误,有时候我不做ng-serve 。
I assume that $
is jQuery
. 我假设
$
是jQuery
。 You must add jQuery
to your dependencies and imported it in the file where you're using it. 您必须将
jQuery
添加到依赖项中,并将其导入到您正在使用它的文件中。 I'd suggest also adding the type definitions for jQuery: npm install @types/jquery --save-dev
我建议还添加jQuery的类型定义:
npm install @types/jquery --save-dev
If you're importing jQuery in any other way, then just add the types. 如果您以任何其他方式导入jQuery,则只需添加类型。
This is a possible solution: 这是一个可能的解决方案:
HTML: 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>
Typescript: 打字稿:
//Define a visual style variable
vstyle: = 'width:50%;';
openNav()
{
vstyle = 'width:50%;'; // Line A
}
closeNav()
{
vstyle = 'width:0%;'; // Line A
}
If you are using the jquery in ts file, declare $ as a variable of type any, then you won't get the error. 如果您在ts文件中使用jquery,请将$声明为类型为any的变量,那么您将不会收到错误。
declare var $:any 声明var $:any
Use style.width 使用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>
And then set the value of "myWidthVariable" on your openNav() and closeNav() methods (just the number). 然后在openNav()和closeNav()方法(只是数字)上设置“myWidthVariable”的值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.