Question

我有一个角度为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文件，但这不起作用。我对角度2很新。

Answer 1

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

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

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

如何在角度2模板中导入外部jquery文件？

1 个答案: