[英]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.