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