标签内的代码<script> is not working in the component.html file in VScode,angular
[英]code within the tag <script> is not working in the component.html file in VScode,angular
问题描述
my question is, even though i have included the tag 
我的问题是，即使我已包含标签
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
in index.html 在index.html中
In the component.html, code within the tag is not being executed. 在component.html中，标记内的代码未执行。
No errors, when inspected. 检查时没有错误。
PS: I have used the following for the toast message box PS：我已将以下内容用于烤面包消息框
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
Edit: 编辑：
code: 码：
<!DOCTYPE html>
<html>
<head>
<title>Collapse/Expand</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<style>
#container{
margin:0 auto;
width:80%;
overflow:auto;
}
table.gridtable {
margin:0 auto;
width:95%;
overflow:auto;
font-family: helvetica,arial,sans-serif;
font-size:14px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
text-align: center;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #F6B4A5;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
}
</style>
</head>
<body>
<div class="container" id="container">
<table class="gridtable" id="tableMain">
<thead>
<tr class="tableheader">
<th>customer</th>
<th>product</th>
<th>thedate</th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr class="breakrow"><td>customer 01</td><td></td><td></td><td></td></tr>
<tr class="datarow"><td>customer 01</td><td>product 01</td><td>30 10 2017</td><td>974.57</td></tr>
<tr class="datarow"><td>customer 01</td><td>product 02</td><td>04 12 2017</td><td>634.50</td></tr>
<tr class="datarow"><td>customer 01</td><td>product 03</td><td>30 10 2017</td><td>974.57</td></tr>
<tr class="datarow"><td>customer 01</td><td>product 04</td><td>04 12 2017</td><td>634.50</td></tr>
<tr class="datarow"><td>customer 01</td><td>product 05</td><td>30 10 2017</td><td>974.57</td></tr>
<tr class="datarow"><td>customer 01</td><td>product 06</td><td>04 12 2017</td><td>634.50</td></tr>
<tr class="datarow"><td>customer 01</td><td>product 07</td><td>30 10 2017</td><td>974.57</td></tr>
<tr class="datarow"><td>customer 01</td><td>product 08</td><td>04 12 2017</td><td>634.50</td></tr>
<tr class="datarow"><td>customer 01</td><td>product 09</td><td>30 10 2017</td><td>974.57</td></tr>
<tr class="datarow"><td>customer 01</td><td>product 10</td><td>04 12 2017</td><td>634.50</td></tr>
<tr class="breakrow"><td>customer 02</td><td></td><td></td><td></td></tr>
<tr class="datarow"><td>customer 02</td><td>product 01</td><td>04 12 2017</td><td>634.50</td></tr>
<tr class="datarow"><td>customer 02</td><td>product 02</td><td>30 10 2017</td><td>974.57</td></tr>
<tr class="datarow"><td>customer 02</td><td>product 03</td><td>04 12 2017</td><td>634.50</td></tr>
<tr class="datarow"><td>customer 02</td><td>product 04</td><td>30 10 2017</td><td>974.57</td></tr>
<tr class="datarow"><td>customer 02</td><td>product 05</td><td>04 12 2017</td><td>634.50</td></tr>
<tr class="breakrow"><td>customer 03</td><td></td><td></td><td></td></tr>
<tr class="datarow"><td>customer 03</td><td>product 01</td><td>30 10 2017</td><td>974.57</td></tr>
<tr class="datarow"><td>customer 03</td><td>product 02</td><td>04 12 2017</td><td>634.50</td></tr>
<tr class="datarow"><td>customer 03</td><td>product 03</td><td>30 10 2017</td><td>974.57</td></tr>
<tr class="datarow"><td>customer 03</td><td>product 04</td><td>04 12 2017</td><td>634.50</td></tr>
<tr class="datarow"><td>customer 03</td><td>product 05</td><td>30 10 2017</td><td>974.57</td></tr>
<tr class="datarow"><td>customer 03</td><td>product 06</td><td>04 12 2017</td><td>634.50</td></tr>
<tr class="datarow"><td>customer 03</td><td>product 07</td><td>30 10 2017</td><td>974.57</td></tr>
<tr class="datarow"><td>customer 03</td><td>product 08</td><td>04 12 2017</td><td>634.50</td></tr>
</tbody>
</table>
</div>
<button id = "button1" type="button">Load</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script >
$( document ).ready(function() {
$('#button1').click(function () {
$("#tableMain").append('<tr class="breakrow"><td>customer 04</td><td></td><td></td><td></td></tr>');
$("#tableMain").append('<tr class="datarow"><td>customer 04</td><td>product 01</td><td>30 10 2017</td><td>974.57</td></tr>');
$("#tableMain").append('<tr class="datarow"><td>customer 04</td><td>product 02</td><td>04 12 2017</td><td>634.50</td></tr>');
$("#tableMain").append('<tr class="datarow"><td>customer 04</td><td>product 03</td><td>30 10 2017</td><td>974.57</td></tr>');
$("#tableMain").append('<tr class="datarow"><td>customer 04</td><td>product 04</td><td>04 12 2017</td><td>634.50</td></tr>');
$("#tableMain").append('<tr class="datarow"><td>customer 04</td><td>product 05</td><td>30 10 2017</td><td>974.57</td></tr>');
});
//collapse and expand sections
//$('.breakrow').click(function(){
$('#tableMain').on('click', 'tr.breakrow',function(){
$(this).nextUntil('tr.breakrow').slideToggle(200);
});
});
</script>
</body>
</html>
When this html file is run individually as 'file:///D:/Angular/node-v8.11.4-win-x64/node-v8.11.4-win-x64/foldername%20(1)/folder1/projectname/src/app/collapse-test/collapse-test.component.html', it works as expected. 当此html文件以'file：/// D：/Angular/node-v8.11.4-win-x64/node-v8.11.4-win-x64/foldername%20（1）/ folder1 / projectname / src / app / collapse-test / collapse-test.component.html”，它可以按预期工作。
But when executed through project flow.It is not working as expected. 但是当通过项目流程执行时，它无法按预期工作。
2 个解决方案
解决方案1
1 2018-11-07 07:21:57
You cannot add script tag like that in an Angular component. 您不能在Angular组件中添加脚本标签。 If you want to install jQuery do it like that: 如果要安装jQuery，请按照以下步骤操作：
First install jQuery using npm as follows 首先使用npm安装jQuery，如下所示
npm install jquery — save
Second go to the ./angular-cli.json file at the root of your Angular CLI project folder, and find the scripts: [] property, and include the path to jQuery as follows 其次，转到Angular CLI项目文件夹根目录下的./angular-cli.json文件，找到脚本：[]属性，并包括jQuery的路径，如下所示
"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]
After including jQuery stop running your Angular CLI application and then re run it using ng serve. 包含jQuery后，停止运行Angular CLI应用程序，然后使用ng serve重新运行它。
Now to use jQuery, all you have to do is to import it as follows in whatever component you want to use jQuery. 现在要使用jQuery，您所需要做的就是按照以下方式将其导入到要使用jQuery的任何组件中。
import * from 'jquery';
If you absolutely want to insert an inline script tag, refer to the asnwer here: https://stackoverflow.com/a/38090157/8664336 如果您绝对要插入一个内联脚本标签，请在此处参考清单： https ://stackoverflow.com/a/38090157/8664336
解决方案2
0 2018-11-07 07:20:58
It's not a right way to access your script in you component.html you can add all your external script references in your index.html 这不是在component.html访问脚本的正确方法，您可以在index.html添加所有外部脚本引用
If you want to access internally other than cdn install the specific library npm install [packageName]@latest this comment line will add the package and you can refer it in angular.json file on scripts array or styles array 如果您要访问而不是内部安装CDN，请安装特定的库npm install [packageName]@latest此注释行将添加该软件包，您可以在scripts数组或styles数组的angular.json文件中引用该软件包。
Hope this help you - Thanks Happy coding !! 希望对您有帮助-祝您编程愉快！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.