gpt4 book ai didi

jquery - 如何在 Angular 2 模板中导入外部 jquery 文件?

转载 作者:行者123 更新时间:2023-12-01 05:32:38 24 4
gpt4 key购买 nike

我有一个 Angular 2 应用程序,其组件中有一个模板,如下所示

app.component.ts

import {Component} from 'angular2/core';

@Component({
selector: 'my-app',
templateUrl: 'templates/homepage.html',
directives: []
})
export class AppComponent {

}

我需要在模板 homepage.html 中包含外部 jquery 文件

我尝试将外部脚本文件包含在 homepage.html 中,如下所示似乎不起作用

<script src="/src/js/jquery.min.js"></script>
<script src="/src/js/jquery.scrollex.min.js"></script>
<script src="/src/js/jquery.scrolly.min.js"></script>
<script src="/src/js/skel.min.js"></script>
<script src="/src/js/util.js"></script>
<script src="/src/js/main.js"></script>

boot.ts 文件如下所示

/// <reference path="../typings/browser.d.ts" />
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from "./app.component";

bootstrap(AppComponent);

index.html

<html>
<head>
<base href="/">
<title>Angular 2 Boilerplate</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>

<!--
<link rel="stylesheet" href="src/css/app.css"> -->
</head>
<body>
<my-app>Loading...</my-app>

<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</body>
</html>

我尝试在index.html 本身中加载.js 文件,但这不起作用。我对 Angular 2 还很陌生。

最佳答案

组件模板中的脚本标签刚刚被删除。

解决方法是强制添加脚本标记或使用 require(...) 加载它。

另请参阅
-angular2: including thirdparty js scripts in component
-https://github.com/angular/angular/issues/7720
-How to Append <script></script> in javascript?

关于jquery - 如何在 Angular 2 模板中导入外部 jquery 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36299209/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com