当前位置: 首页 > Web前端 > HTML

关于Angular模块封装概念的常见误解

时间:2023-03-28 18:19:02 HTML

Angular以类似于ES模块的方式引入了模块封装的概念。它基本上意味着可声明的类型——组件、指令和管道——只能由在该模块内声明的组件使用。例如,如果我尝试使用以下代码在App模块的App组件内的A模块中使用a-comp:@Component({selector:'my-app',template:`

Hello{{name}}}}

`})exportclassAppComponent{}将收到此错误消息:Templateparseerrors:'a-comp'isnotaknownelement这是因为有是没有声明一个补偿。如果我想使用这个组件,我需要导入定义这个组件的模块。解决方案如下:@NgModule({imports:[...,AModule]})exportclassAppModule{}这就是封装发挥作用的地方:必须通过将a-comp添加到exports数组来声明模块其他模块可用:@NgModule({...declarations:[AComponent],exports:[AComponent]})exportclassAModule{}大多数Angular新手认为Provider也有封装,这是错误的。在任何非延迟加载模块中声明的Providers.Modules层次结构都可以在应用程序中的任何位置访问。导入模块最大的困惑是开发人员假设这些导入的模块在应用程序运行时保持层次结构,并假设导入其他模块的模块成为导入模块的父级。然而,事实并非如此。所有模块在编译时合并。因此,导入模块与导入模块之间没有层级关系。所需命名空间之一被定义为默认命名空间。此命名空间的控制标记不需要前缀。标签是必需的,在上面的示例中,核心名称空间定义在第一行。当然开发者可以定义任何名称。例如,要使标记名称更短,也可以使用c代替core。