2016-11-29 101 views
0

之外我下載一些免費的HTML5範本,並計劃把它用在我的angular2程序不能正常工作。問題是,當我將body放在index.html或app.component.html之外時,模板不起作用。它什麼都不顯示。我相信我把每一個src都對了。看一看。第三方庫,如果index.html的

的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的,它完美的作品,但是當我開始得到從身體標記的代碼並把它裏面app.component.html,這我肯定會去的標籤,它不是沒有出現。我的選擇器是正確的,我確信它。任何人都在意解釋或提供一些解決方案?這將是非常讚賞。

+1

什麼問題AngularJS時,可利用angular.element(元素)的?你期望什麼顯示?有很多代碼,但我沒有得到相關的代碼。 「index.html」在哪裏? –

+0

Outside index.html表示app.component.html或其他html文件。我把所有的CSS要求放在index.html中,並且還要求所有需要的js文件,但是body需要放在其他html文件中。現在,如果我把所有的代碼index.html文件裏面,它加載正確和預期,但如果我刪除了body標籤的所有內容,並把它放在裏面app.component.html,這是行不通的。 –

回答

1

jQuery插件不工作。相反,請創建一個指令,並將您通常在指令的鏈接函數中使用的代碼。

有一對夫婦在文檔中,你可以看看點。你可以在這裏找到他們:

確保當您在您的視圖引用腳本,你是指它最後一次 - 在angularjs庫,控制器,售後服務和過濾器引用。

而不是使用$(元素),您可以使用與jQuery

Refer this blog

0

<script>標籤是從組件模板(有上拉的請求,允許他們對一些元數據但是這尚未落地)

CSS文件應該被添加到@Component({ styleUrls: [...]}),而不是在模板<style>標籤修剪。對角應用如預期