首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么运行时填充的数组在NgModule声明上不起作用?

在Angular中,NgModule是一个装饰器函数,用于定义一个模块。NgModule装饰器函数接受一个元数据对象,其中包含了该模块的配置信息,包括声明的组件、指令、管道等。

运行时填充的数组是指在NgModule的元数据对象中使用的providers数组,用于提供依赖注入所需的服务。这个数组在NgModule声明上不起作用的原因是,NgModule的元数据对象在编译时就已经被静态解析了,而运行时填充的数组是在运行时动态添加的。

换句话说,NgModule的元数据对象在编译时就已经确定了,无法在运行时修改。因此,无论在providers数组中添加了哪些服务,都不会对NgModule的元数据对象产生影响。

要解决这个问题,可以考虑使用@Injectable装饰器来提供服务,而不是在NgModule的providers数组中声明。@Injectable装饰器可以直接应用于服务类,使其成为可注入的依赖项。这样,无论是在NgModule中还是在组件中,都可以通过依赖注入的方式使用该服务。

总结起来,运行时填充的数组在NgModule声明上不起作用是因为NgModule的元数据对象在编译时就已经确定了,无法在运行时修改。为了解决这个问题,可以考虑使用@Injectable装饰器来提供服务,而不是在NgModule的providers数组中声明。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular系列教程-第五节

1.模块 NgModule 是一个带有 @NgModule 装饰器类。 @NgModule 参数是一个元数据对象,用于描述如何编译组件模板,以及如何在运行时创建注入器。...NgModule 元数据会做这些: 声明某些组件、指令和管道属于这个模块。 公开其中部分组件、指令和管道,以便其它模块中组件模板中可以使用它们。...该模块 declarations 数组告诉 Angular 哪些组件属于该模块。 当你创建更多组件时,也要把它们添加到 declarations 中。...每个组件都应该(且只能)声明(declare)一个 NgModule 类中。 如果你使用了未声明组件,Angular 就会报错。 declarations 数组只能接受可声明对象。...可声明对象包括组件、指令和管道。 一个模块所有可声明对象都必须放在 declarations 数组中。 可声明对象必须只能属于一个模块,如果同一个类被声明了多个模块中,编译器就会报错。

2.9K20

Angular 5 快速入门与提高

因此, 应用开发中引入了模块(NgModule概念来组织不同组件(及服务),一个 Angular应用至少需要创建一个模块。...为了区别于JavaScript语言本身模块概念,本课程中将使用__NG模块__来 表示一个Angular模块。 类似于组件,NG模块就是一个应用了NgModule装饰器类。...NgModule装饰器声明了一些关键元数据,来通知框架需要载入哪些NG模块、 编译哪些组件以及启动引导哪些组件: imports: 需要引入外部NG模块 declarations:本模块创建组件,...NG模块,要么是已经declarations元数据 中声明本地组件。...早期,Angular 只有即时编译(JIT:Just In Time),也就是说应用代码是在运行时编译

1.8K20

前端框架与库 - Angular模块与依赖注入

模块通过 @NgModule 装饰器声明,通常包含以下几部分:declarations: 列出属于此模块所有组件、指令和管道。imports: 导入其他模块,以使用它们提供功能。...exports: 允许其他模块使用此模块中声明组件、指令或管道。providers: 提供服务实例,这些服务可以整个模块或其子模块中共享。2....依赖注入(DI)依赖注入是Angular核心特性之一,它允许我们以声明方式管理类之间依赖关系。Angular 使用服务定位器模式,通过 DI 容器在运行时动态创建和注入依赖项。...常见问题与易错点问题1:模块重复导入大型项目中,模块之间可能存在复杂依赖关系,容易出现模块重复导入问题,导致编译错误或运行时性能问题。...避免陷阱2:正确设置服务作用域使用 providedIn 属性模块级别提供服务,以控制其作用域。对于需要在多个组件间共享服务,考虑将其设置为根模块提供者。

9510

Angular 从入坑到挖坑 - 模块简介

NgModule 简介 Angular 应用中,至少会存在一个 NgModule,也就是应用根模块(AppModule),通过引导这个根模块就可以启动整个项目 像开发中使用到 FormsModule...、HttpClientModule 这种 Angular 内置库也都是一个个 NgModule开发中通过将组件、指令、管道、服务或其它代码文件聚合成一个内聚功能块,专注于系统某个功能模块...使用 @NgModule 装饰器时,通常会使用到下面的属性来定义一个模块 declarations:当前模块中组件、指令、管道 imports:当前模块所需其它 NgModule 模块...当创建新组件时,需要将它们添加到 declarations 数组中。...每个组件都只能声明一个 NgModule 类中,同时,如果你使用了未声明组件,Angular 将会报错 同样,对于当前模块使用到自定义指令、自定义管道,也需要在 declarations 数组中进行声明

1.8K20

Angular--Module使用

其中最重要属性如下: declarations(可声明对象表) ——属于本 NgModule 组件、指令、管道。...exports(导出表) —— 用于其它模块组件模板中使用声明对象子集(the subset of declarations)。...imports(导入表) —— 其他模块,本NgModule声明组件需要使用它们导出类。 providers —— 本模块向全局服务中贡献那些服务创建器。 这些服务能被本应用中任何部分使用。...(你也可以组件级别指定服务提供商,这通常是首选方式。) bootstrap —— 应用主视图,称为根组件。它是应用中所有其它视图宿主。只有根模块才应该设置这个 bootstrap 属性。...@NgModule 参数是一个元数据对象,用于描述如何编译组件模板,以及如何在运行时创建注入器。

4.9K40

Angular 2 + 折腾记 :(2)初步认识angular2,不一样开发模式

---- 基础概念 国内官网--基础 词汇表(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法表,里面涵盖了很多写法,相当于一本小字典 关于ng2一堆为什么:...对应国际官网 GLOSSARY CHEAT SHEET NGMODULE FAQS ARCHITECTURE OVERVIEW 英文水平比较好推荐国际官网,这边API更新很及时 ---- angular-cli...依赖了哪些文件,有哪些作用 index.html <!...(polyfill)..有详细注释 typings.d.ts : 全局变量声明文件 testconfig.*.json: 不同模式下调用tsconfig配置文件 app目录下(分很彻底,...; // 声明一个public变量并且赋值 }复制代码 app.module.ts:模块 // 浏览器NG模块 import { BrowserModule } from

6.2K20

Angular 2 模块(Modules)

小规模应用程序中也许只有一个根模块 , 大多数应用有许多功能模块,每个耦合代码块作用于程序域、工作流或是密切相关功能。...Angular 有三种视图类: components, directives, and pipes. exports - 声明一部分,对于其他模块组件模板是可见和可用。...imports - 声明这个模块组件模版需要、其他模块声明导出类。 providers - 这个模块服务创建器,是全局服务集合一部分,可以被应用任意部位访问到。... JavaScript 中, 每个 文件就是一个模块,所有定义文件中对象都属于模块。模块定义公有对象通过关键词export标记这些对象。.../app.component'; export class AppModule { } 在网上学习更过关于Javascript模块系统知识。 这是两种不同和完整模块系统,应用中同时使用它们。

87570

模块化开发 Angular 应用

想要更好地理解 Angular 应用程序所有的不同构建模块? 在这篇文章中,我们将走进模块内容。 angular 应用中,模块是共享和重用代码好方法。...就像组件一样,生成结构是一个模块树。 @NgModule @NgModule 操作符里面,我们定义模块所有属性。我们提供了一个简单 JavaScript 对象作为参数。...Declarations declarations 数组中,我们定义着所有的组件,指令和管道,我们可以在这个模块内使用。...如果一个组件(或者指令或者管道)你并没有添加到 declarations 中,但是你又在模块或者应用中使用了,angular 应用在运行时报错。此外,一个组件只能在一个模块中声明。...Angular 模块是类,用 @NgModule 进行标识。另一方面,当我们使用 Typescript 关键字 import 导入模块时,我们导入一个 JavaScript 模块。

3K10

Angualr2 之 angular模块Angular 模块化提供服务特性模块 - 业务上最佳实践(n)共享模块XxxModule.forRoot配置核心服务知识点

管理指令、管道、组件 模块中定义提供商是会加到根模块中去,正常引导的话,如果是惰性加载的话,就会放在一部分中(loading范围内根模块)。...模块没有父子关系,只有引入 ---- 用@NgModule来定义应用中模块。 Angular 模块是带有 @NgModule 装饰器函数。... Angular模块是由一个@NgModule装饰器提供元数据类,元数据包括: 1-导入其他模块 2-声明哪些组件、指令、管道属于该模块 3-公开某些类,以便其他组件模块可以使用它们...ionic样式 imports: [ CommonModule, IonicModule, ], // 2- 这里声明了这3个组件属于该模块 declarations:...那么我们提供服务地方就有多个: 可以组件中提供服务 可以模块创建中提供服务 组件中提供服务 组件中提供服务,它作用范围就仅仅局限于该组件以及其子组件。 e.g.

2.2K30

Angular 路由配置(预加载配置,懒加载配置)

@NgModule作用NgModule 最根本意义是帮助开发者组织业务代码,开发者可以利用 NgModule 把关系比较紧密组件组织到一起,这是首要。...NgModule 用来控制组件、指令、管道等是否可以使用,处于同一个 NgModule 里面的组件默认互相可见,而对于外部组件来说,只能看到 NgModule 导出( exports )内容,也就是说...NgModule 是打包时候用到最小单位,打包时候会检查所有 @NgModule 和路由配置,Angular底层是使用webpack打包。...httpModule、路由等)   export:[],//声明出应用给其他module使用   providers: [], //注入服务到当前模块   bootstrap: []//默认启动哪个组件...loadChildren属性值由三部分组成: 需要导入Module相对路径 #分隔符 导出模块类名称 (3)预加载 使用懒加载情况下,路由第一次加载某个模块时,有时反应有延迟。

3.1K30

一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

如果您对我们为什么这么做感到好奇,可以Angular文档中阅读它。...但在基本层面上,请考虑如下这些方法:创建组件之后立即调用构造函数,传递给它数据准备好并填充之前很久才调用该构造函数,而ngOnInit仅在第一个更改周期数据,因此您可以访问组件输入。...我们开始生成任何代码之前,AppComponent就在这里,所以我们新组件实际上将模块填充到两个地方:首先,它们从定义文件中导入,然后它们被包含在我们NgModule装饰器声明数组中。...为什么这样?我们正在从Firebase获得观察结果。但是,我们*ngForCardList组件中等待对象数组,不能观察这些数组。...Ngrx效应 那么什么是副作用?它代码片段Actions或多或少地与我们缩减器相同,但它不是我们状态中改变某些内容,而是实际发送API请求,并根据结果派发新代码Actions。

42.5K10

Angular快速学习笔记(2) -- 架构

NgModule 为一个组件集声明了编译上下文环境,它专注于某个应用领域、某个工作流或一组紧密相关能力。 NgModule 可以将其组件和一组相关代码(如服务)关联起来,形成功能单元。...declarations(可声明对象表) —— 那些属于本 NgModule 组件、指令、管道 exports(导出表) —— 那些能在其它模块组件模板中使用声明对象子集。...JavaScript 中,每个文件是一个模块,文件中定义所有对象都从属于那个模块。 通过 export 关键字,模块可以把它某些对象声明为公共。...providers 是当前组件所需依赖注入提供商一个数组,组件需要用到service,需要在这里提供 1.2.2 模板与视图 模板就是一种 HTML,它会告诉 Angular 如何渲染该组件。...本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且文章页面明显位置给出原文连接,否则保留追究法律责任权利。

5.2K20

Angular 2 架构(上)

Angular 模块是一个带有 @NgModule 装饰器类,它接收一个用来描述模块属性元数据对象。 几个重要属性如下: declarations (声明) - 视图类属于这个模块。...Angular 有三种类型视图类: 组件 、 指令 和 管道 。 exports - 声明( declaration )子集,可用于其它模块中组件模板 。...imports - 本模块组件模板中需要由其它导出类模块。 providers - 服务创建者。本模块把它们加入全局服务表中,让它们应用中任何部分都可被访问到。...templateUrl - 组件 HTML 模板地址。 directives - 一个数组,包含 此 模板需要依赖组件或指令。...providers - 一个数组,包含组件所依赖服务所需要依赖注入提供者。 ----

1.4K10

Angular 从入坑到挖坑 - 路由守卫连连看

,添加 router-outlet 标签用来声明路由页面上渲染出口 Angular Router <a routerLink="/crisis-center" routerLinkActive...组件全部移动到 crisis 模块下面,并在 CrisisModule 中添加对于 crisis-list、crisis-detail 组件声明,同时将原来 app.module.ts 中声明组件代码移除...这里问题与配置通配路由需要放到最后原因相似,因为脚手架在帮我们将创建模块导入到 app.module.ts 中时,是添加到整个数组最后,同时因为我们已经将 crisis 模块路由配置移动到专门...AppRoutingModule 放到声明最后 ?...== -1) { return true; } } } 同样,针对路由守卫实现完成后,将需要使用到路由守卫添加到 crisis-center 路由 canLoad 数组中即可实现授权认证不通过时不加载模块

3.7K30
领券