Angular 2組件templateUrl沒有顯示

Question

我將一個knockoutjs應用程序移植到Angular 2.我有一個Angular 2組件，在這個階段純粹由一個html模板（web應用程序的登錄頁面）組成。

但是，沒有一個html顯示在網站上。我知道該網站的角2部分工作，因爲我確實有頁面說「我的第一個角2應用程序」，之前我改變它顯示着陸頁。

app.component.ts：

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    template: '<landing-page></landing-page>' 
}) 
export class AppComponent { } 

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { AppComponent } from './app.component'; 
bootstrap(AppComponent); 

landingpage.component.ts：

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'landing-page', 
    templateUrl: 'app/scripts/landingpage.component.html', 
}) 
export class LandingPage { } 

landingpage.component.html：

<div id="landing-page" style="background-color: #696969;overflow-y:auto;" class="full-size special"> 
<div id="google-attribute"></div> 
    <div style="height:100%;padding: 40px 40px 40px 40px; min-height:600px;"> 
     <div class="row sm" style="height:20%;"> 
      <div class="col-xs-3" style="height:100%;"> 
       <img class="small-monster" width="100" src="assets/images/home_page/monster2.png"/> 
      </div> 
      <div class="col-xs-6"></div> 
      <div class="col-xs-3 small-monster" style="height:100%;"> 
       <img class="small-monster" style="float:right;" width="100" src="assets/images/home_page/monster4.png"/> 
      </div> 
     </div> 
     <div class="row main-row"> 
      <div class="col-sm-3 bm" style="height:100%;"> 
       <div class="vertical-center"> 
       <img width="250" src="assets/images/home_page/monster2.png"/> 
       </div> 
      </div> 
      <div class="col-sm-12 col-md-6" style="height:100%;" > 
       <div id="motto-text" class="vertical-center"> 
        <h5 class="white-text medium-text">THE VEGAN REPOSITORY</h5> 
        <h1 id="main-text" 
         class="text-center white-text display-3"> 
         FIND VEGAN STUFF* NEAR YOU. 
        </h1> 
        <a id="try-now-button" 
         class="with-border clickable" 
         href="#search-filter-page" > 
         <h5 class="text-center medium-text">TRY NOW</h5> 
        </a> 
       </div> 
      </div> 
      <div class="col-sm-3 bm" style="height:100%;"> 
       <div class="vertical-center"> 
       <img width="250" src="assets/images/home_page/monster4.png"/> 
       </div> 
      </div> 
      <div class="row br"> 
        <div class="col-xs-12" style="display:table;height:100%;"> 
         <h4 style="color:#FFF; display: table-cell; vertical-align: bottom;">*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!</h4> 
        </div> 
      </div> 
     </div> 
    </div> 
</div> 

什麼是缺失的一環，這是從顯示阻止我的HTML？

Answer 1

landingpage.component.ts

@Component({ 
    selector: 'my-app', 
    template: '<landing-page></landing-page>', 
    directives: [] 
}) 
export class LangingPage { } <== it should be not AppComponent 

然後，你必須將其導入您的app.component.ts：

import { LangingPage } from './landingpage.component' 

而且不要忘了將它添加到directives元器件的元數據：

@Component({ 
    selector: 'my-app', 
    template: '<landing-page></landing-page>', 
    directives: [LangingPage ] <== this line 
}) 
export class AppComponent { }