Angular2 자바 스크립트를 사용하는 외부 파일의로드 구성 요소

Question

Angular2의 기본 사항 인 angular tutorial을 따르고 있습니다. JavaScript는 현재 Typescript에서만 사용 가능하므로이 파일을 javascript로 변환하려고합니다.

현재 app.component.js와 hero-detail.component.js의 두 파일이 있습니다. app.component.js에 있습니다. AppComponent가 있습니다. 여기에서 hero-detail.component.js의 구성 요소를 지시문으로로드하고 싶습니다.

나의 현재 코드는 다음과 같습니다,하지만 난 HeroDetailComponent을로드하는 방법을 알아낼 수 없습니다 :

app.AppComponent = 
ng.core.Component({ 
    selector: 'my-app', 
    inputs : ['hero'], 
    directives: [HeroDetailComponent], 
    template: `<h1>{{title}}</h1>My Heroes<h2></h2> 
      <ul class="heroes"> 
      <li *ngFor="let hero of heroes" 
      [class.selected]="hero === selectedHero" 
      (click)="onSelect(hero)"> 
      <span class="badge">{{hero.id}}</span> {{hero.name}} 
      </li> 
      </ul> 
      <my-hero-detail [hero]="selectedHero"></my-hero-detail> 
      ` 
}) 
.Class({ 
    constructor: function() { 
    this.title = 'Tour of Heroes' 
    this.heroes = HEROES 
    this.selectedHero = null 
    }, 
    onSelect(hero) { this.selectedHero = hero; } 
}); 

})(window.app || (window.app = {}));enter code here 

Answer 1

은 자바 스크립트에서는 모든 변수가 window에 바인딩 턴에있는 app에 바인딩됩니다.

AppComponent이 정의 된 것과 동일한 방법으로 HeroDetailComponent을 정의해야합니다.

(function (app) { 
    app.HeroDetailComponent = ng.core.Component({ 
    selector: 'hero-detail', 
    inputs: ['hero'], // <-- this is necessary to receive the "selectedHero" 
    template: ` <!-- ... --> ` 
    }).Class({ 
    constructor: function() { 
    } 
    }); 
})(window.app || (window.app = {})); 

하면 당신의 AppComponent에서 index.html

<!-- 2. Load our 'modules' --> 
<script src='app/hero.js'></script> 
<script src='app/hero-detail.component.js'></script> 
<script src='app/app.component.js'></script> 
<script src='app/main.js'></script> 

, 새로 생성 된 추가 할 HeroDetailComponent

과 같이

app.AppComponent = ng.core.Component({ 
    directives: [app.HeroDetailComponent], <-- // note the dependence on the `app` object 
    // ... and other things 
}).Class({ /* Class Declaration */ });