Question

我正在使用Angular 5，我想要包含我的脚本文件.js

我正在使用index.html中的script标签

当我刷新页面时，一切正常，但当我使用SPA路由时，我的js文件不包含

这是一个例子：

如果我刷新页面

当我使用SPA导航时

这是 index.html ，其中包含我的所有脚本脚本标记

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <base href="/">
    <title>Listeo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="../assets/css/colors/main.css" id="colors">
</head>
<body>
    <app-base></app-base>
    <script type="text/javascript" src="../assets/scripts/jquery-2.2.0.min.js"></script> 
    <script type="text/javascript" src="../assets/scripts/mmenu.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/chosen.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/slick.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/rangeslider.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/magnific-popup.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/waypoints.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/counterup.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/tooltips.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/custom.js"></script>
    <script type="text/javascript" src="../assets/scripts/switcher.js"></script>
</body>
</html>

这是导航栏：

<nav id="navigation" class="style-1">
    <ul id="responsive">
        <li>
            <a [routerLink]="['home']" [routerLinkActive]="['current']">Home</a>
        </li>
        <li>
            <a [routerLink]="['restaurants']" [routerLinkActive]="['current']">Restaurants</a>
        </li>
    </ul>
</nav>

当我使用 href 时，一切都不错，但是 [routerLink] 我正面临着这个问题。

Answer 1

您使用的是Angular CLI吗？然后，您可以将自定义js文件放入.angular-cli.json

"scripts": [
    "<path_to_script",
    "<path_to_second_script"
]

然后你不必在index.html中引用它们。

Answer 2

您需要手动触发脚本

通过查看文档（http://rangeslider.js.org/），触发脚本的方法是

 $('input[type="range"]').rangeslider();

所以你可能需要做的是在组件的ngAfterViewInit方法（使用rangelider的方法）中触发它。这需要在ngAfterViewInit中，以确保已创建dom元素。

//component.ts
ngAfterViewInit()
{
   $('input[type="range"]').rangeslider();
}

Angular 5包含javascript文件

2 个答案: