Angular 2在同一页上有多个组件
Angular 2在同一页上有多个组件
提问于 2016-03-28 13:15:47
我正在从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 { }这不是work...Is它，我做错了什么，或者这是不允许的？
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-03-28 13:17:14
您不能在页面中有两个具有相同选择器的根组件，也不能在同一个类上有两个@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)支持覆盖选择器以能够多次添加根组件存在一个未决的问题
Stack Overflow用户
发布于 2016-03-28 13:22:47
一个组件不能有两个组件装饰器(@ component )。您需要为此创建两个不同的类：
@Component({
selector: 'app',
template: `<h1>Title Here</h1>`
})
export class AppComponent { }
@Component({
selector: 'appTwo',
template: `<h1>Another Title Here</h1>`
})
export class AppComponent1 { }然后你可以使用枪手的答案中的方法。
Stack Overflow用户
发布于 2016-04-12 15:55:36
如果这对任何人都有帮助，可以用iFrames做同样的事情。制作了一个示例，您可以在此处查看：http://plnkr.co/edit/xWKGS6
基本上，我使用iframe来加载小部件html。
<iframe src="widget.html" width="500" height="400" style="border:none; background-color:#ccc">
</iframe>该小部件是一个普通的angular2 html页面
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36263181
复制
相似问题
寻找两个数组之间的最小可能差异
寻找最小差异
寻找两个列表之间的差异
寻找两个DataTables之间的差异
关于寻找两个元素的数组之间的最小差异的混乱
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
