Angular模块--特性模块&惰性加载模块

最新推荐文章于 2024-01-09 16:56:14 发布

weixin_33682790

最新推荐文章于 2024-01-09 16:56:14 发布

阅读量186

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/3412211/blog/898466

版权

2019独角兽企业重金招聘Python工程师标准>>>

一个应用不可能将所有组件、指令balabala那一大堆东西都放在根模块下，所以我们需要将应用内的一些东西进行分类打包成一些单独的模块

特性模块

特性模块是带有@NgModule装饰器及其元数据的类，就像根模块一样，特性模块的元数据和根模块的元数据的属性是一样的。

模块之间基本是相互独立的，除非它想要暴露些什么，也就是说包装了这个模块如果不exports任何东西的话。假设根模块A和特性模块B，在根模块A中加载了特性模块B，如果模块B中没有exports任何东西，那么模块A就没法用到模块B中的组件指令之类的东西。

如果模块A和模块B都需要用到FormsModule，那么他们都需要分别导入FormsModule。

但是根模块和特性模块共享着相同的执行环境。它们共享着同一个依赖注入器，这意味着某个模块中定义的服务在所有模块中也都能用。

它们在技术上有两个显著的不同点：

我们引导根模块来启动应用，但导入特性模块来扩展应用
特性模块可以对其它模块暴露或隐藏自己的实现

特性模块通过自己提供的服务和它决定对外共享的那些组件、指令、管道来与根模块等其它模块协同工作。

当前模块不会继承其它模块中对组件、指令或管道的访问权。

用路由器实现惰性 (lazy) 加载

惰性 (lazy) 加载不是在根模块上用导入的方式加载这个模块，而是将该特性模块通过子路由的方式，当激活路由时才加载，用到RouterModule.forChild( )

import {...

const userRoutes: Routes = [
  { path: '',component: UserComponent }   //注意这里的path
  ...
]

@NgModule({
  imports: [
    ...
    RouterModule.forChild(userRoutes)
  ...
})

export class UserModule { }

配置好了以后不用导入UserModule，只要将它弄到主路由配置上，当激活这个路由路径时就加载这个模块，简直不能更简单

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'user', loadChildren: './user/user.module#UserModule'}, //看这里用个loadChilren就好了
  ...
]

@NgModule({
  imports: [
    ...
    RouterModule.forRoot(routes)
  ],
  ...

转载于:https://my.oschina.net/u/3412211/blog/898466