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)

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