Question

我正在使用app.component.ts文件中的Angular 2快速入门代码。

该文件如下所示：

   string[] badWordArray = { "aBadword1", "aBadWord2", "aBadWord3" };

   // Nasty user wants to be rude but pass typical filters...
   String name = "A- Bad..WORD..1 !!!";

   String line = Regex.Replace(name, @"\W", "");

   Boolean isBadWord = badWordArray
     .Any(badWord => line.IndexOf(badWord, StringComparison.OrdinalIgnoreCase) >= 0);

这可以按预期工作。

我想要做的是在同一页面上添加另一个组件......所以我尝试了这个：

import {Component} from 'angular2/core';

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

这不起作用......是我做错了还是不允许这样做？

Answer 1

您的页面中不能有两个具有相同选择器的根组件，您也不能在同一个类中拥有两个@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)

有一个未解决的问题是支持覆盖选择器以便能够多次添加根组件
- https://github.com/angular/angular/issues/915

Answer 2

您不能拥有包含两个组件装饰器的组件（@Component）。您需要为此创建两个不同的类：

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

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

然后你可以使用Gunter的回答......

Answer 3

这对任何人都有帮助，可以用iFrame做同样的事情。你可以在这里看到一个样本： http://plnkr.co/edit/xWKGS6

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

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

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

Angular 2同一页面上的多个组件

3 个答案: