AngularJs 2中的AppComponent和@Component之間的連接是什麼？

Question

文件app.component.ts實施例中：https://angular.io/resources/live-examples/toh-1/ts/plnkr.html是如下：

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

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

@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 AppComponent { 
    title = 'Tour of Heroes'; 
    hero: Hero = { 
    id: 1, 
    name: 'Windstorm' 
    }; 
} 

現在，我們在AppComponent設定的title值，它是在@Component的模板示出。那麼，想知道它有多可能？

Answer 1

@Component()是一個裝飾器，並直接應用於類，成員或變量後面的裝飾器。因此，因爲@Component()修飾符就在class AppComponent()之前，所以它被應用到這個類中。

template: '...'中的表達式在它們所應用的類的範圍內進行評估。 title因此是指title字段AppComponent

Answer 2

正如Günter所說是裝飾者。另一件事是裝飾者使用Reflect.defineMetadata自動設置元數據在相關的類與反射元數據lbrary。元數據對應於您設置爲裝飾器參數（類型ComponentMetadata）的參數。

當使用該組件時，Angular2將查找此類註釋以瞭解如何使用/配置該組件。