Angularjs2-一个页面显示多个组件

bootstrap - 标识出应用的主视图(被称为 根组件 ),它是所有其它视图的宿主。只有 根模块 才能设置 bootstrap 属性。

bootstrap - the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property.

深刻理解,其他视图宿主!!

//app.component.ts
@Component({
  selector: 'my-app',
  template: `
    <h1>helloApp</h1>
  `
})

//header.component.ts
@Component({
  selector: 'my-header',
  template: `
    <h1>helloHeader</h1>
  `
})
//app.module.ts
@NgModule({
  ...
  bootstrap:    [ AppComponent]
  ...
})
index.html
<body>
    <my-header></my-header>
    <my-app>Loading...</my-app>
</body>

浏览网页,会发现,只有my-app添加上了,my-header去哪里了呢?说好的组件化呢?r u kidding me?

解决方案一:

将my-header从index.html中移动到app.component.ts中,如下

//app.component.ts
@Component({
  selector: 'my-app',
  template: `
    <my-header></my-header>
    <h1>helloApp</h1>
  `
})

为什么这样就能加上了呢?思考中。。。。

bootstrap 视图宿主,难道是。。。见解决方案二

解决方案二:

直接修改app.module.ts

//app.module.ts
@NgModule({
  ...
  bootstrap:    [ AppComponent,HeaderComponent]
  ...
})

参考资料:stackoverflow

转载于:https://www.cnblogs.com/kuangniaokuang/p/6089732.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值