Javascript 同一页上有两个以上的组件

我正在使用app.component.ts文件中的Angular 2快速启动代码

该文件如下所示：

import {Component} from 'angular2/core';

@Component({
    selector: 'app',
    template: `<h1>Title Here</h1>'
})
export class AppComponent { }

从'angular2/core'导入{Component}；
@组成部分({
选择器：“应用程序”，
模板：`Title Here'
})
导出类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 { }

从'angular2/core'导入{Component}；
从'angular2/core'导入{ComponentTwo}；
@组成部分({
选择器：“应用程序”，
模板：`Title Here'
}),
@组成部分({
选择器：“appTwo”，
模板：`这里有另一个标题'
})
导出类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)

@组件({
选择器：“应用程序”，
模板：“AppComponent1”
})
导出类AppComponent1{}
@组成部分({
选择器：“appTwo”，
模板：“AppComponent2”
})
导出类AppComponent2{}
引导（AppComponent1）
引导（AppComponent2）

支持重写选择器以能够多次添加根组件的问题尚未解决

---

-

一个组件不能有两个组件修饰符（@component）。您需要为此创建两个不同的类：

@Component({
    selector: 'app',
    template: `<h1>Title Here</h1>`
})
export class AppComponent { }

@Component({
    selector: 'appTwo',
    template: `<h1>Another Title Here</h1>`
})
export class AppComponent1 { }

@组件({
选择器：“应用程序”，
模板：`这里是标题`
})
导出类AppComponent{}
@组成部分({
选择器：“appTwo”，
模板：`这里还有一个标题`
})
导出类AppComponent1{}

---

然后，您可以使用Gunter答案中的方法…

如果这对任何人都有帮助，可以对iFrame做同样的事情。制作了一个示例，您可以在这里看到：

基本上，我使用iframe加载小部件html

<iframe src="widget.html" width="500" height="400" style="border:none; background-color:#ccc">
  </iframe>

---

小部件是一个普通的angular2 html页面

？覆盖选择器可能有什么好处？您可以多次添加同一根组件，但仍然不能添加到同一个选择器。我想知道是否有任何好处或理由让多个自举

根

组件。。。有什么想法吗@GünterZöchbauer只是一个新手问题：

AppComponent1

（或

AppComponent2

）如何知道要将哪个

@Component

作为目标？我有一个问题，请澄清，组件如何知道它应该采用哪个导出类？第一个组件（{selector:'app'}）和导出类AppComponent1{}之间的关系是什么？使用共享服务与其他组件一样进行通信并不容易。是的，但该示例更多地是关于整个过程中使用的相同组件，每个组件相互独立。因此，就像一个小部件场景，比如说一个是否应用程序，在该应用程序中，您可以显示站点中不同地点不同城市的是否。我想这是人们希望加载多个导出类的唯一原因（tbh:）使用iframes从来都不是一个好主意，因为缺乏控制。我有一个查询，请澄清，组件如何知道它应该使用哪个导出类？第一个组件（{selector:'app'}）和导出类AppComponent{}之间的关系是什么？