각도 2 구성 요소 templateUrl이 표시되지 않음

Question

knockoutjs 앱을 각도 2로 이식합니다.이 단계에서 순수하게 (웹 앱의 방문 페이지의) html 템플릿으로 구성된 각도 2 구성 요소가 있습니다.

그러나 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 { }