简体   繁体   English

Angular 5包含javascript文件

[英]Angular 5 include javascript files

I'm using Angular 5 and I want to include my script files .js 我正在使用Angular 5,并且要包含我的脚本文件.js

I'm using the script tag in the index.html 我在index.html中使用脚本标签

When I refresh the page everything works fine, but when i'm using SPA routing my js files does not included 当我刷新页面时,一切正常,但是当我使用SPA路由时,我的js文件不包括在内

Here's an exemple : 这是一个例子:

If I refreshed the page 如果我刷新页面

在此处输入图片说明

When i'm using SPA navigation 当我使用SPA导航时

在此处输入图片说明

Here's index.html where i include all my script whith script tag 这是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>

and here's the navigation bar : 这是导航栏:

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

When I'm using the href everything wirks fine, but with [routerLink] I'm facing the problem. 当我使用href时,一切正常,但是使用[routerLink]时,遇到了问题。

Are you using the Angular CLI? 您是否正在使用Angular CLI? Then you can put your custom js files into .angular-cli.json 然后,您可以将自定义js文件放入.angular-cli.json

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

Then you don't have to reference them in the index.html. 然后,您不必在index.html中引用它们。

You need to manually trigger the script 您需要手动触发脚本

From looking at the documentation ( http://rangeslider.js.org/ ), the way to trigger the script is 通过查看文档( http://rangeslider.js.org/ ),触发脚本的方法是

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

So what you probably need to do is trigger this in your component's ngAfterViewInit method (the one using rangeslider). 因此,您可能需要做的是在组件的ngAfterViewInit方法(使用rangelider的方法)中触发此操作。 This need to be in ngAfterViewInit to make sure that the dom elements have been created. 这需要在ngAfterViewInit ,以确保已创建dom元素。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM