自定义js文件的放置位置以及如何在Angular 4应用程序中引用它们
[英]Where to place custom js files and how to reference them in Angular 4 application
问题描述
Let's say I acquired a html5 template. 
假设我获得了html5模板。 The folder that contains HTML, css, js files, and other types of resources like pictures. 包含HTML，css，js文件和其他类型的资源（如图片）的文件夹。 I copied/pasted the Html and css to component.html and component.css . 我将HTML和CSS复制/粘贴到component.html和component.css 。
When it comes to JavaScript, I have a folder called js containing few individual JavaScript files. 关于JavaScript，我有一个名为js的文件夹，其中包含一些单独的JavaScript文件。
Where should I place the js folder and how to do I reference them in my application? 我应该在哪里放置js文件夹，以及如何在应用程序中引用它们？
In the original file I have something like all the way to the bottom of the HTML file: 在原始文件中，直到HTML文件的底部我都有类似的东西：
<script src="js/script1.js"></script>
<script src="js/script2.js"></script>
<script src="js/script3.js"></script>
Thanks for helping 感谢您的帮助
2 个解决方案
解决方案1
4 2018-03-06 03:04:26
You can put it under src/assets/js/script1.js 您可以将其放在src/assets/js/script1.js
Then add it on .angular-cli.json 然后将其添加到.angular-cli.json
"apps": [
{
...
"scripts": [
"assets/js/script1.js"
]
}
]
To access your code on your typescript code, 要在您的打字稿代码上访问您的代码，
you can access it globally via 您可以通过以下方式全局访问它
declare const globalVar: any;
解决方案2
2 已采纳 2018-03-06 03:04:56
you have two choices 你有两个选择
1 you can place it inside body tag in index.html like this 1您可以像这样将其放置在index.html中的body标签内
<body>
<app-root></app-root>
<script type="text/javascript" src="assets/jquery/jquery.min.js">
</script>
<script type="text/javascript" src="assets/js/script2.js">
</script>
</body>
2 you can place it inside scripts in .angular-cli.json file like this 2您可以将其放在.angular-cli.json文件中的脚本中，如下所示
"scripts": [
"./assets/js/script2.js"
"assets/jquery/jquery.min.js"
],
and if you want to access the code inside the component, declare a global variable just under the import statement and above the component declaration like this 如果要访问组件内部的代码，请在import语句下方和组件声明上方声明一个全局变量，如下所示
import { Component } from '@angular/core';
declare const $: any;
@Component({
selector: 'tc-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
showModal(){
//caling jQuery method
$("#modalId").show();
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.