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

发布时间:2020-01-13 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了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

总结

以上是脚本之家为你收集整理的javascript – Angular 2同一页面上的多个组件全部内容,希望文章能够帮你解决javascript – Angular 2同一页面上的多个组件所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。

脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ” ,选择关注!
精选程序员所需精品干货内容!

标签: