Javascript Angular 2 在同一页面上有多个组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36263181/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 More than one component on same page
提问by Satch3000
I am working from the Angular 2 quick start code on app.component.ts file.
我正在使用 app.component.ts 文件上的 Angular 2 快速入门代码。
The file looks like this:
该文件如下所示：
import {Component} from 'angular2/core';
@Component({
selector: 'app',
template: `<h1>Title Here</h1>'
})
export class AppComponent { }
This works as expected.
这按预期工作。
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?
这不起作用......是我做错了什么还是不允许这样做？
回答by Günter Z?chbauer
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.
页面中不能有两个具有相同选择器的根组件，也不能@Component()在同一个类上有两个装饰器。
If your components have different selectors, just run bootstrap for each root 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)
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
有一个开放问题支持覆盖选择器以多次添加根组件
- https://github.com/angular/angular/issues/915
回答by Thierry Templier
You can't have a component with two component decorators (@Component). You need to create two different classes for this:
一个组件不能有两个组件装饰器 (@Component)。您需要为此创建两个不同的类：
@Component({
selector: 'app',
template: `<h1>Title Here</h1>`
})
export class AppComponent { }
@Component({
selector: 'appTwo',
template: `<h1>Another Title Here</h1>`
})
export class AppComponent1 { }
Then you can use the approach from the Gunter's answer...
然后你可以使用 Gunter 的回答中的方法......
回答by MSwehli
Incase this is helpful to anyone, could do the same thing with iFrames. Made a sample you can see here: http://plnkr.co/edit/xWKGS6
如果这对任何人都有帮助，可以用 iFrame 做同样的事情。制作了一个示例，您可以在这里看到：http: //plnkr.co/edit/xWKGS6
Basically i use iframes to load a widget html
基本上我使用 iframes 来加载一个小部件 html
<iframe src="widget.html" width="500" height="400" style="border:none; background-color:#ccc">
</iframe>
The widget is a normal angular2 html page
小部件是一个普通的 angular2 html 页面
