код внутри тега <script>не работает в файле component.html в VScode, угловой - PullRequest
Новая
       35

код внутри тега <script>не работает в файле component.html в VScode, угловой

0 голосов
/ 07 ноября 2018

мой вопрос, хотя я включил тег 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

в index.html

В component.html код внутри тега не выполняется.

Нет ошибок при проверке.

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:

код: 

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

Когда этот 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 ', работает должным образом.

Но при выполнении через поток проекта. Он не работает должным образом.

Ответы [ 2 ]

0 голосов
/ 07 ноября 2018

Вы не можете добавить скрипт-тег в Angular-компонент. Если вы хотите установить jQuery, сделайте так:

Сначала установите jQuery, используя npm, следующим образом 

npm install jquery — save

Во-вторых, перейдите к файлу ./angular-cli.json в корне вашей папки проекта Angular CLI, найдите свойство scripts: [] и укажите путь к jQuery следующим образом 

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

После включения jQuery прекратите работу приложения Angular CLI, а затем снова запустите его, используя ng serve.

Теперь, чтобы использовать jQuery, все, что вам нужно сделать, это импортировать его следующим образом в любой компонент, который вы хотите использовать jQuery. 

import * from 'jquery';

Если вы абсолютно хотите вставить тег встроенного сценария, обратитесь к ответу здесь: https://stackoverflow.com/a/38090157/8664336

0 голосов
/ 07 ноября 2018

Это неправильный способ доступа к вашему скрипту в вас component.html вы можете добавить все ваши внешние ссылки на скрипты в вашем index.html

Если вы хотите получить доступ к внутренним файлам, отличным от cdn, установите определенную библиотеку npm install [packageName]@latest, эта строка комментария добавит пакет, и вы можете ссылаться на него в файле angular.json в массиве scripts или styles массиве

Надеюсь, это поможет вам - Спасибо, Счастливое кодирование!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...