angular 生命周期

angular typescript 文件选择 angular export_angular


用法详解：https://ithelp.ithome.com.tw/articles/10203203

ngModule

选项介绍：

  • imports: []：依赖于哪些其他模块
  • declaration: []：声明与模板有关的，如指令、组件、管道
  • exports: []，在模块中使用的组件等如果想在其他模块中也使用，在 exports 中进行导出
  • providers: []，注入服务
  • bootstrap: []，在其中声明的组件会被自动启动，放在bootstrap中的组件，会自动被视为放入entryComponents中
  • entryComponents: []：动态加载组件时，因为不知道组件何时被使用，所以在打包时，为此 Angular 设计了 entryComponents: []，如果组件要动态加载，可以通过在 entryComponents: [] 中声明，防止在打包时被移除。
    在显示一个组件时，有动态加载和静态加载两种方法：
  • 静态加载：主动在模板中使用 <app-xxx></app-xxx> 的方式来加载。
  • 动态加载：不是在某个模板中使用 <app-xxx></app-xxx> ，而是通过手动调用等法师展示在页面上（例如，通过 dialog 打开）

模块化在项目中的实际应用

  • Feature Module：依照不同的功能将代码分割成不同模块
  • Shared Module：將共用的组件等组合成一个公共模块
  • Core Module：当 service 有 singleton 需求时，把所有 service 统一放在此模块中

FeatureModule

即根据功能的不同划分模块，例如后台管理可以划分为 成员管理、组织管理、权限管理等

SharedModule

将一些公共组件可以放到 SharedModule 中，例如：

@NgModule({
  declarations: [SearchComponent, ...],
  exports: [SearchComponent, ...]
})
export class SharedModule { }

然后在其他需要的模块的 imports 中声明即可

CoreModule

场景：有一个 service，在 n 个模块中都要用到，如果在每个用到的 module 的 providers 都声明一遍，会导致每个模块中都重新创建一次这个 service 的实例，每个模块中拿到的service 都是不同的实例，这不是我们想要的结果，导致在不同模块中，同一个 service 中拿到的数据不同。

解决： 创建一个 CoreModule，将所有需要 singleton 的 service 都放入这个 CoreModule 中，并且只在 AppModule 中import CoreModule，其他模块中不允许加入 CoreModule

@Injectable 中的 providedIn

这是上面 singleton 的更优解，在 service 的 @Injectable 內指定 {providedIn: 'root'} ，如此，不在需要加入到任何模块的 providers 中，就可以达到上面CoreModule 中一样的效果。