Angular中入口组件(entryComponents)与声明式组件的区别

在阅读 Angular 官方文档的过程中,其中 Angular 自定义元素|Angular章节的内容晦涩难懂,幸好现在互联网资料丰富,现在总结一下Angular加载组件的种类和不同。

概述

Angular的声明式组件和入口组件的区别体现在两者的加载方式不同。

  • 声明式组件是通过组件声明的selector加载
  • 入口组件(entry component)是通过组件的类型动态加载

声明式组件

声明式组件会在模板里通过组件声明的selector加载组件。

示例:

1
2
3
4
5
6
7
@Component({
selector: 'a-cmp',
template: `
<p>这是A组件</p>
`
})
export class AComponent{}
1
2
3
4
5
6
7
8
@Component({
selector: 'b-cmp',
template: `
<p>在B组件里内嵌A组件</p>
<a-cmp></a-cmp>
`
})
export class BComponent{}

在BComponent的模板里,使用selector<a-cmp></a-cmp>声明加载AComponent。

入口组件(entryComponents)

入口组件是通过指定的组件类加载组件。

主要分为三类:

  1. 在@NgModule.bootstrap里声明的启动组件,如AppComponent。
  2. 在路由配置里引用的组件
  3. 其他通过编程使用组件类型加载的动态组件

启动组件

app.components.ts

1
2
3
4
5
6
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent{}

app.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

bootstrap里声明的AppComponent为启动组件。虽然我们会在index.html里使用组件的selector<app-root></app-root>的位置,但是 Angular 并不是根据此 selector 来加载 AppComponent。这是容易让人误解的地方。因为 index.html 不属于任何组件模板,Angular 需要通过编程使用bootstrap里声明的AppComponent类型加载组件,而不是使用 selector。

由于 Angular 动态加载 AppComponent,所以AppComponent是一个入口组件。

路由配置引用的组件

1
2
3
4
5
6
7
8
9
10
11
@Component({
selector: 'app-nav',
template: `
<nav>
<a routerLink="/home" routerLinkActive #rla="routerLinkActive" selected="#rla.isActive">首页</a>
<a routerLink="/users" routerLinkActive #rla="routerLinkActive" selected="#rla.isActive">用户</a>
</nav>
<router-outlet></router-outlet>
`
})
export class NavComponent {}

我们需要配置一个路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const routes: Routes = [
{
path: "home",
component: HomeComponent
},
{
path: "user",
component: UserComponent
}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Angular根据配置的路由,根据路由指定的组件类来加载组件,而不是通过组件的selector加载。

配置入口组件

在 Angular 里,对于入库组件需要在@NgModule.entryComponents里配置。

由于启动组件和路由配置里引用的组件都为入口组件,Angular会在编译时自动把这两种组件添加到@NgModule.entryComponents里。对于我们自己编写的动态组件需要手动添加到@NgModule.entryComponents里。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@NgModule({   
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule
],
providers: [],
entryComponents: [
DialogComponent
],
bootstrap: [
AppComponent
]
})
export class AppModule { }

引自 Angular入口组件(entry component)和声明式组件的区别