javascript – Angular 2同一页面上的多个组件

我正在从Angular 2快速启动代码在app.component.ts文件上工作.

该文件如下所示：

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 { }

这不行吗？这是我做错了什么,这是不允许的？

解决方法

您的页面中不能有两个具有相同选择器的根组件,同样的类也不能有两个@Component()装饰器.

如果您的组件具有不同的选择器,则只需为每个根组件运行引导

@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