なぜ角度2コンポーネントでクラスの順序が重要になるのですか？

Question

私はangular2の公式チュートリアルに続き、「2.ヒーローエディタ」を作ろうとしています。 app.component.tsファイルには、HeroとAppComponentという2つのクラスがあります。

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>{{title}}</h1> 
    <h2>{{hero.name}} details!</h2> 
    <div><label>id: </label>{{hero.id}}</div> 
    <div> 
     <label>name: </label> 
     <input [(ngModel)]="hero.name" placeholder="name"> 
    </div> 
    ` 
}) 

export class Hero { 
    id: number; 
    name: string; 
} 

export class AppComponent { 
    title = 'Tour of Heroes'; 
    hero: Hero = { 
    id: 1, 
    name: 'Windstorm' 
    }; 
} 

AppComponentはメンバータイプが 'Hero'クラスなので、HeroはAppComponentの前に宣言する必要があると考えました。 しかし、奇妙なエラーメッセージが以下のように表示されました。

EXCEPTION: No Directive annotation found on AppComponent 

私がHeroクラスをAppComponentの次に移動したとき、それは機能します...そして、なぜ私はそれを知りません。 アドバイスをいただければ幸いです。ありがとう。

Answer 1

デコレータ（たとえば、@Component）は、直後のオブジェクトで機能します。あなたのコードは次のようになります。

@Component({...}) 
class Hero {} 

@Component({...}) 
class AppComponent {} 

あなたはJavaScript例を見れば：

app.AppComponent = 
    ng.core.Component({ 
    }) 
    .Class({ 
    }); 

あなたが1つのファイルに書き込み、複数のクラスなら、あなたは、また、なぜ...

を見ることができます注文すること。 JavaScriptは順番に実行されますが、まだ定義されていないものを尋ねると、エラーが発生します。