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

前端之家收集整理的这篇文章主要介绍了javascript – Angular 2同一页面上的多个组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在从Angular 2快速启动代码在app.component.ts文件上工作.

文件如下所示:

  1. import {Component} from 'angular2/core';
  2.  
  3. @Component({
  4. selector: 'app',template: `<h1>Title Here</h1>'
  5. })
  6. export class AppComponent { }

这样可以预期.

我想做的是在同一页面添加另一个组件…所以我试过这个:

  1. import {Component} from 'angular2/core';
  2. import {ComponentTwo} from 'angular2/core';
  3.  
  4. @Component({
  5. selector: 'app',template: `<h1>Title Here</h1>'
  6. }),@Component({
  7. selector: 'appTwo',template: `<h1>Another Title Here</h1>'
  8. })
  9. export class AppComponent { }

这不行吗?这是我做错了什么,这是不允许的?

解决方法

您的页面中不能有两个具有相同选择器的根组件,同样的类也不能有两个@Component()装饰器.

如果您的组件具有不同的选择器,则只需为每个根组件运行引导

  1. @Component({
  2. selector: 'app',template: '<h1>AppComponent1</h1>'
  3. })
  4. export class AppComponent1 { }
  5.  
  6. @Component({
  7. selector: 'appTwo',template: '<h1>AppComponent2</h1>'
  8. })
  9. export class AppComponent2 { }
  10.  
  11.  
  12. bootstrap(AppComponent1)
  13. bootstrap(AppComponent2)

有一个开放的问题,以支持覆盖选择器以能够多次添加根组件
https://github.com/angular/angular/issues/915

猜你在找的JavaScript相关文章