首页 > 解决方案 > 为什么 Angular 组件需要引导?

问题描述

因此,我创建了一个包含两个组件的简单 Angular 应用程序(我只展示了相关的代码片段):

@NgModule({
  declarations: [
    AppComponent,
    Block2Component
  ],
  imports: [ BrowserModule ],
  providers: [],
  bootstrap: [ AppComponent, Block2Component ]
})
export class AppModule { }

我的登录页面想要呈现 2 个顶级组件:

<body style="background-color: rgb(234, 240, 220);">
  <p>Content that came from index.HTML</p>
  <app-root></app-root>
  <app-block2></app-block2>
</body>

在这种代码状态下,它可以很好地构建和呈现页面。但是组件引导的含义是什么?我尝试从模块的引导部分中删除组件名称,并且该组件从页面中消失了。好吧,某些事情需要引导。但为了什么?

根模块从main.ts文件中引导。这意味着 Angular 知道可用组件的列表。为什么它不能在登录页面模板上看到组件的选择器后在后台进行引导?

标签: angular

解决方案


自举数组

应用程序通过引导根 AppModule(也称为 entryComponent)来启动。除此之外,引导过程创建引导数组中列出的组件,并将每个组件插入浏览器 DOM。

每个引导组件都是其自己的组件树的基础。插入自举组件通常会触发一系列组件创建来填充该树。

虽然您可以在主机网页上放置多个组件树,但大多数应用程序只有一个组件树并引导单个根组件。

这个根组件通常称为 AppComponent 并且位于根模块的引导程序数组中。


推荐阅读