Angular 5包含javascript文件

Question

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

我在index.html中使用脚本标签

当我刷新页面时，一切正常，但是当我使用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 个解决方案

解决方案1
1 2018-03-25 15:09:50

解决方案2
0 已采纳 2018-03-25 16:15:43

Angular 5包含javascript文件

问题描述

2 个解决方案

解决方案1 1 2018-03-25 15:09:50

解决方案2 0 已采纳 2018-03-25 16:15:43

解决方案1
1 2018-03-25 15:09:50

解决方案2
0 已采纳 2018-03-25 16:15:43