Question

我希望在我的应用程序启动时显示一个对话框，但是即使定义为ReferenceError: $ is not defined，也遇到错误declare var $: any;。该演示位于https://stackblitz.com/edit/angular-gnwe2c

如果您检查控制台，则会看到错误。

我定义了一个DialogComponent，它在Bootstrap中只是模态的dialog.component.html。它具有方法showDialog，该方法调用Bootstrap的{{1}}方法modal。

在$(this.dialogRef.nativeElement).modal('show');中，我正在使用app.component.html-DialogComponent。 <app-dialog-box #dialogBox ></app-dialog-box>取一个AppComponent，并根据Input决定是否显示对话框

App.component.ts

Input

在index.html中 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) } } }

此外，在<my-app [signup]="'success'">loading</my-app>中，我将在使用index.html之前加载所有javascripts和jquery，因此我希望my-app应该可用。

更新- 这是一个有趣的行为。当我使用https://angular-gnwe2c.stackblitz.io首次运行该应用程序时，没有看到对话框，也没有看到控制台ReferenceError中的错误：$未定义，但是如果我更改代码（例如键入Enter，Stackblitz会刷新代码，然后弹出对话框！我认为当应用程序最初加载时，不会下载jquery，但是当我更改代码时，那时可以使用jquery

Answer 1

我无法在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>

我更改了订单，将jquery和bootstrap移到了Angular的软件包之前

<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>

Answer 2

不好的做法是手动将脚本包含到index.html中。所有必需的软件包都应通过npm安装。

将StackBlitz demo更改为原始问题-将boostrap和jquery的导入内容添加到dialog.component.ts中。然后安装缺少的依赖项-jquery，bootstrap和popper.js软件包。

希望这会有所帮助！

ReferenceError：$未在Angular中定义

2 个答案: