Question

我对angular2的当前测试版有疑问，请帮我理解或向我展示正确的技术文档？

1）这是我的app.component，我只导出AppComponent。但我的@Component如何在此获得名字？这是如何连接的？

import {Component} from 'angular2/core';


interface Hero {
    id: number;
    name: string;
}

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



export class AppComponent {

    public title = "Tour of Heros";
    public hero : Hero = {

        id :1,
        name: 'Windstorm'

    } 

}

这是boot.ts我只有AppComponent。不是@Component，而是如何在html中提供@component模板？如何boot.ts从template获取AppComponent。

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

任何人澄清我。我对angular2很新。提前谢谢。

Answer 1

我认为您的问题主要在quickstart页面中得到解答：

当我们给它元数据时，类成为Angular组件。我们使用Angular Component函数定义组件的元数据。

在TypeScript中，我们将该函数作为装饰器应用于类，前缀为@符号，并在组件类的上方调用它。
  @Component告诉Angular这个类是一个Angular组件。

当Angular在boot.ts中调用bootstrap函数时，它会读取AppComponent元数据，找到my-app选择器，找到名为my-app的元素标记，并在这些标记之间加载我们的应用程序。

另外，请查看TypeScript编译器生成的JavaScript文件：app.component.js。您将看到模板已添加到生成的AppComponent函数中。

Angular2 - 需要一些清晰度

1 个答案: