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

posted @ 2016-11-22 16:07  kuangniaokuang  阅读(2533)  评论(0)  编辑  收藏  举报