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

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

文件如下所示:

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 { }

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

解决方法

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

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

原文链接:https://www.f2er.com/js/153594.html

猜你在找的JavaScript相关文章