Почему порядок классов имеет значение в угловом 2-х компоненте?

Question

Я следую за официальным уроком angular2 и собираюсь сделать «2. The Hero Editor». В файле app.component.ts у меня есть два класса, Hero и AppComponent.

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 имеет тип элемента класса «героя», я думал, герой должен объявлен перед 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({ 
    }); 

вы можете понять, почему ...

Кроме того, если вы записи нескольких классов в одном файле , порядок имеет значение. JavaScript выполняется последовательно, если вы запрашиваете то, что еще не определено, вы получите сообщение об ошибке.