我正在从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