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