外部ファイルのAngular2ロードコンポーネント

Question

Angular2の基本についてはangular tutorialに従っていますが、現在はTypescriptでのみ利用可能なので、javascriptに変換しようとしています。

私は現在、app.component.jsとhero-detail.component.jsの2つのファイルを持っています。 app.component.jsにあり、私は自分のAppComponentを持っています。これから、hero-detail.component.jsのコンポーネントをディレクティブとしてロードしたいと思います。

私の現在のコードは次のように見えますが、私はHeroDetailComponentロードする方法を見つけ出すことはできません：JavaScriptで

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 = {})); 

ので

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