同一页上的角2的多个组件 [英] Angular 2 More than one component on same page
问题描述
我是从角2快速启动code工作app.component.ts文件。
I am working from the Angular 2 quick start code on app.component.ts file.
文件看起来是这样的:
import {Component} from 'angular2/core';
@Component({
selector: 'app',
template: `<h1>Title Here</h1>'
})
export class AppComponent { }
这正常工作。
我想要做的就是添加此同一页上的另一个组成部分...所以我想这样的:
What I want to do is to add another component on this same page ... so I tried this:
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 { }
这不工作...难道我做错了什么,或者这是不允许的?
This doesn't work...Is it that I'm doing something wrong or is this not allowed?
推荐答案
您不能有相同的选择两根组件在你的页面,你也不能有两个 @Component()
在同一类的装饰器。
You can't have two root components with the same selector in your page, you also can't have two @Component()
decorators on the same class.
如果您的组件有不同的选择,只需要运行引导每一根组件
If your components have different selectors, just run bootstrap for each root 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
There is an open issue to support overriding the selector to be able to add a root component multiple times
- https://github.com/angular/angular/issues/915
这篇关于同一页上的角2的多个组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!