我想在我的应用程序启动时显示一个对话框,但我收到错误ReferenceError: $ is not defined
,即使我已经定义它像declare var $: any;
。该演示在https://stackblitz.com/edit/angular-gnwe2c
如果您检查控制台,您将看到错误。
我已经定义了一个DialogComponent
,它只是Bootstrap
中的dialog.component.html
模态。它有一个方法showDialog
,它调用Bootstrap
的modal
方法$(this.dialogRef.nativeElement).modal('show');
。
在app.component.html
,我使用的是DialogComponent
- <app-dialog-box #dialogBox ></app-dialog-box>
。 AppComponent
采取Input
并且根据Input
,它决定是否显示对话框或nott
App.component.ts
ngAfterViewInit(){
if(this.signup!=""){
if(this.signup === "success") {
this.showDialog("Signup was successful")
}else if(this.signup === "error") {
this.showDialog("Error: Signup wasn't successful")
} else {
this.showDialog("Unrecognised message: "+this.signup)
}
}
}
在index.html <my-app [signup]="'success'">loading</my-app>
此外,在index.html
,我在使用javascripts
之前加载所有jquery
和my-app
所以我希望$
应该可用。
更新 - 这是一个有趣的行为。当我第一次使用https://angular-gnwe2c.stackblitz.io运行应用程序时,我没有看到对话框并在控制台中看到错误ReferenceError:$未定义,但是如果我更改代码(比如键入一个Enter,Stackblitz刷新代码和对话框) box pops!我认为当应用程序最初加载时,jquery没有下载但是当我更改代码时,jquery当时可用
我无法解决Stackblitz
中的问题,但在我的应用程序中,我能够通过更改脚本的加载顺序来解决问题
我的应用程序是使用Play
框架提供的。原始代码是
<app-root signup=@signup>
</app-root>
@* Built Angular bundles *@
<script src="@routes.Assets.versioned("ui/polyfills.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/runtime.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/vendor.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/styles.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/main.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("javascripts/common/vendor/jquery/jquery-3.2.1.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("javascripts/common/vendor/bootstrap/bootstrap.js")" type="text/javascript"></script>
我更改了顺序并在Angular的包装之前移动了jquery
和bootstrap
<script src="@routes.Assets.versioned("javascripts/common/vendor/jquery/jquery-3.2.1.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("javascripts/common/vendor/bootstrap/bootstrap.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/polyfills.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/runtime.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/vendor.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/styles.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/main.js")" type="text/javascript"></script>
将脚本手动包含到index.html
中是不好的做法。所有必要的软件包都应该通过npm
安装。
将StackBlitz demo从原来的问题改为 - 将boostrap
和jquery
的进口添加到dialog.component.ts
。然后安装缺少的依赖项 - jquery
,bootstrap
和popper.js
包。
希望这可以帮助!