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