如果第三方庫在index.html之外，則無法使用

Question

我下載了一些免費的html5模板，並計划在我的angular2程序中使用它。 問題是，當我將主體放在index.html或app.component.html內時，模板不起作用。 它什么也不顯示。 我確定我將每個src都正確設置了。 看一看。

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Facebook and Twitter integration -->
    <meta property="og:title" content=""/>
    <meta property="og:image" content=""/>
    <meta property="og:url" content=""/>
    <meta property="og:site_name" content=""/>
    <meta property="og:description" content=""/>
    <meta name="twitter:title" content="" />
    <meta name="twitter:image" content="" />
    <meta name="twitter:url" content="" />
      <meta name="twitter:card" content="" />

    <!-- Animate.css -->
    <link rel="stylesheet" href="assets/css/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="assets/css/icomoon.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="assets/css/bootstrap.css">

    <!-- Flexslider  -->
    <link rel="stylesheet" href="assets/css/flexslider.css">

    <!-- Owl Carousel  -->
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">

    <!-- Theme style  -->
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- Modernizr JS -->
    <script src="assets/js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="js/respond.min.js"></script>
    <![endif]-->

      <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>

    <my-app></my-app>

    <!-- jQuery -->
    <script src="assets/js/jquery.min.js"></script>
    <!-- jQuery Easing -->
    <script src="assets/js/jquery.easing.1.3.js"></script>
    <!-- Bootstrap -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- Waypoints -->
    <script src="assets/js/jquery.waypoints.min.js"></script>
    <!-- Carousel -->
    <script src="assets/js/owl.carousel.min.js"></script>
    <!-- countTo -->
    <script src="assets/js/jquery.countTo.js"></script>
    <!-- Flexslider -->
    <script src="assets/js/jquery.flexslider-min.js"></script>
    <!-- Main -->
    <script src="assets/js/main.js"></script>

  </body>
</html>

app.component.html中的一些代碼

<div id="fh5co-services" class="fh5co-bg-section">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-4 text-center">
                <div class="feature-center animate-box" data-animate-effect="fadeIn">
                    <span class="icon">
                        <i class="icon-credit-card"></i>
                    </span>
                    <h3>Credit Card</h3>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove</p>
                    <p><a href="#" class="btn btn-primary btn-outline">Learn More</a></p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 text-center">
                <div class="feature-center animate-box" data-animate-effect="fadeIn">
                    <span class="icon">
                        <i class="icon-wallet"></i>
                    </span>
                    <h3>Save Money</h3>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove</p>
                    <p><a href="#" class="btn btn-primary btn-outline">Learn More</a></p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 text-center">
                <div class="feature-center animate-box" data-animate-effect="fadeIn">
                    <span class="icon">
                        <i class="icon-paper-plane"></i>
                    </span>
                    <h3>Free Delivery</h3>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove</p>
                    <p><a href="#" class="btn btn-primary btn-outline">Learn More</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

這里什么都沒有顯示。 這里的事情是，當我將所有內容都放入index.html時，它可以正常工作，但是當我開始從body標簽中獲取代碼並將其放在app.component.html中時，我確定將其添加到標簽中，這不是沒有出現。 我的選擇器是正確的，我確定。 有人願意解釋或提供一些解決方案嗎？ 那將不勝感激。

Answer 1

jQuery插件在角度應用程序上無法正常工作。 而是創建一個指令，然后將通常應具有的代碼放入該指令的鏈接函數中。

您可以查看文檔中的幾點。 您可以在這里找到它們：

確保在視圖中引用腳本時，在引用angularjs庫，控制器，服務和過濾器之后，最后引用該腳本。

除了將$（element）用作jQuery之外，還可以使用angular.element（element）。

推薦此博客

Answer 2

<script>標簽是從組件模板中刪除的（存在一個拉取請求，允許它們獲取一些元數據，但尚未着陸）

CSS文件應添加到@Component({ styleUrls: [...]}) ，而不應添加到模板中的<style>標簽。

如果第三方庫在index.html之外，則無法使用

問題描述

2 個解決方案

解決方案1
1 已采納 2016-11-29 10:03:00

解決方案2
0 2016-11-29 10:01:05

如果第三方庫在index.html之外，則無法使用

問題描述

2 個解決方案

解決方案1 1 已采納 2016-11-29 10:03:00

解決方案2 0 2016-11-29 10:01:05

解決方案1
1 已采納 2016-11-29 10:03:00

解決方案2
0 2016-11-29 10:01:05