javascript - Angular 2 同一页面上有多个组件

Question

我正在使用 app.component.ts 文件中的 Angular 2 快速入门代码。

文件看起来像这样:

import {Component} from 'angular2/core';

@Component({
    selector: 'app',
    template: `<h1>Title Here</h1>'
})
export class AppComponent { }

这按预期工作。

我想做的是在同一个页面上添加另一个组件...所以我尝试了这个:

import {Component} from 'angular2/core';
import {ComponentTwo} from 'angular2/core';

@Component({
    selector: 'app',
    template: `<h1>Title Here</h1>'
}),

@Component({
    selector: 'appTwo',
    template: `<h1>Another Title Here</h1>'
})
export class AppComponent { }

这不起作用...是我做错了什么还是不允许这样做？

Answer 1

页面中不能有两个具有相同选择器的根组件，也不能在同一个类上有两个 @Component() 装饰器。

如果您的组件有不同的选择器，只需为每个根组件运行 bootstrap

@Component({
    selector: 'app',
    template: '<h1>AppComponent1</h1>'
})
export class AppComponent1 { }

@Component({
    selector: 'appTwo',
    template: '<h1>AppComponent2</h1>'
})
export class AppComponent2 { }


bootstrap(AppComponent1)
bootstrap(AppComponent2)

有一个 Unresolved 问题来支持覆盖选择器以便能够多次添加根组件
- https://github.com/angular/angular/issues/915