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

在angular2中注入了一个服务在ngModule提供程序中,并试图在组件不工作时使用

在Angular 2中,可以通过在NgModule的providers数组中注入服务来使其在整个应用程序中可用。当然,如果组件不工作,可能是由于多种原因导致的。以下是一些可能的解决方案:

  1. 确保在NgModule的providers数组中正确地注入了服务。例如,如果你有一个名为MyService的服务,你应该在NgModule中的providers数组中添加{ provide: MyService, useClass: MyService }。
  2. 检查组件是否正确导入了服务。在组件的构造函数中,你需要使用依赖注入将服务注入到组件中。例如,如果你的组件需要使用MyService,你需要在构造函数中添加参数private myService: MyService。
  3. 确保在组件中正确地使用了服务。你可以在组件的生命周期钩子函数中使用服务。例如,在ngOnInit函数中,你可以调用服务的方法或访问服务的属性。
  4. 检查是否存在任何错误或警告消息。在浏览器的开发者工具中查看控制台,以查看是否有任何与服务相关的错误消息。

如果你遇到了问题,并且以上解决方案都没有解决问题,那么可能需要更多的上下文信息才能帮助你解决问题。请提供更多关于你的组件、服务和错误的详细信息,以便我们能够更好地帮助你。

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

相关·内容

Angular2 :从 beta 到 release4.0 版本升级总结

Angular 模块是带有 @NgModule 装饰器函数的类。 @NgModule 接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。...它标记出该模块拥有的组件、指令和管道, 并把它们的一部分公开出去,以便外部组件使用它们。 它可以向应用的依赖注入器添加服务提供商。 具体请参考官方文档。...解决办法:app根组件声明provider注入ResultHandler服务,则整个app使用一个实例。 3....解决办法:目前路由事件结束(NavigationEnd),手动更新组件状态。 的内嵌样式失效。"...解决办法:注入DomSanitizer服务可以把一个值标记为可信任的,这里添加了一个叫safeUrl的pipe组件,位于app/shared/pipe/safe-url.main.pipe.ts。

8.1K00

Angular2 VS Angular4 深度对比:特性、性能

这个Angular版本更加注重于开发移动应用程序,开发人员可以使用它创建跨平台的应用程序解决了移动应用程序(功能,加载时间等)的挑战后,Angular2可以更容易的处理桌面组件。...动态载入: 这是之前的Angular版本均不具备的功能,Angular2包含了这个功能,即使开发人员忙碌,也能够添加新的指令或控件。 模板: Angular2,模板编译过程是异步的。...指令: Angular2提供了三种指令:  组件指令:通过将逻辑封装在HTML,CSS和JavaScript,从而使得组件可复用。...记录: Angular 2.0包括一个名为diary.js的日志记录服务,这是一个非常有用的属性,用于测量开发人员的编码投入时间(从而允许开发人员识别代码的瓶颈)。...更小更快: 使用Angular4,程序将会消耗更少的空间,比以前的版本运行地更快。工作主要用于不断进行改进。 视图引擎: Angular4的开发人员修改了视图引擎的代码,例如AOT创建的代码。

8.7K20

angular基础面试题_java web面试题

], 本模块向全局服务贡献的那些服务的创建器。...父子组件传值 子组件暴露一个 EventEmitter 属性,当事件发生,子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性,并在事件发生作出回应。...灵活的路由,具备延迟加载功能 更容易学习 angular1是全局监听,变量越多性能越差,angular2采用模块化监听,提升了性能 Angular 2应用,我们应该注意哪些安全威胁?...如果使用外部HTML,也就是来自数据库或应用程序之外的地方,那么就需要清理它。 不要将外部网址放在应用程序,除非它是受信任的。避免网址重定向,除非它是可信的。 考虑使用AOT编译或离线编译。...本站仅提供信息存储空间服务拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

13K50

Angular 5 快速入门与提高

组件提供了很好的复用性,一堆组件的基础上,我们使用简单的胶水代码就可以实现相当 复杂的交互功能。...因此, 应用开发入了模块(NgModule)的概念来组织不同的组件(及服务),一个 Angular应用至少需要创建一个模块。...为了区别于JavaScript语言本身的模块概念,本课程中将使用__NG模块__来 表示一个Angular模块。 类似于组件,NG模块就是一个应用了NgModule装饰器的类。...比如,Angular2正式版之前,都没有NG模块的概念,你只要写一个组件就可以直接 启动应用了。Angular团队的预期应用场景是大规模前端应用开发,因此显式的NG模块 声明要求也是容易理解的。...如果尝试了解从模板到视图对象这个过程究竟发生了什么,我相信你 始终会有一种失控的感觉。 另一方面原因在于,Angular是一个框架,它搭好了应用程序的架子,留了一些 空隙让开发者填充。

1.8K20

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

- 组件定义视图,是可视化部分,每个应用都至少有一个组件 - 组件使用服务组件提果数据可视化,而服务提供与视图直接相关的功能,后台开发的容易理解。...如何使用 Angular ,要把一个类定义为服务,就要用 @Injectable 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入到组件 使用 @Injectable 装饰器来表明一个组件或其它类...你可以模块或者组件中注册这些提供商。 - 当你往根模块添加服务提供服务的同一个实例会服务于你应用的所有组件。...- 当你组件级注册提供,你会为该组件的每一个新实例提供服务一个新实例, 要在组件级注册,就要在 @Component 元数据的 providers 属性中注服务提供商 因此,对于模块机共用的...1.4 路由(Routing) Angular 的 Router 模块提供一个服务,它可以让你定义应用的各个不同状态和视图层次结构之间导航使用的路径。

5.2K20

大漠穷秋:全面解读Angular 4.0核心特性

Angular/cli把打包、压缩等工作全部分装在命令行里面,集成了test的所有功能。...NgModule 真正开发业务系统的时候,光有UI组件是不够的,还有服务、路由以及各种各样的directive。 模块是用来组织业务代码的利器。...做异步路由要注意的是,写的是loadchildren,加载的对象是module而不是component。由此可见,NgModule是用来配合Angular/cli做模块的打包和加载。...只要在构造函数里写需要应用到怎样的属性,Angular会自动创建它的实例注入class。 注射器也是一个树型结构,每个标签上都有injector的实例。...UI库 Angular里面已经有一些比较成熟的组件库可以用了。例如ng2-bootstrap、PrimeNG和官方提供的Angular-Material2,移动端也有Ionic支持。

2.1K50

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

Angular 2的路由工作原理是什么? 路由是能够让用户视图/组件之间导航的机制。Angular 2简化了路由,并提供模块级(延迟加载)下配置和定义的灵活性。 ...Angular2组件中发生的任何改变总是从当前组件传播到其所有子组件。如果一个组件的更改需要反映到其父组件的层次结构,我们可以通过使用事件发射器api来发出事件。...这通常用在setter,当类的值被更改完成。 可以通过模块的任何一个组件使用订阅方法来实现事件发射的订阅。...这需要等待下载所有必需的组件,然后等待编译器花费时间来编译应用程序使用AOT编译,就能实现优化。 构建检测错误:由于预先编译,可以检测到许多编译错误,能够为应用程序提供更好的稳定性。...Wijmo 为每一个UI控件都提供Angular2 组件。所有 Angular2 组件提供了完全声明性标记。

17.3K80

前端代码常见的 Provider 究竟是什么

Angular2提供了创建对象的时候基于 Provider VSCode 插件中有各种 registerXxxProvider 的 api React 提供了 Provider 组件用于 context...context 的 Provider react 组件树可以组件放一些数据到 context ,然后子组件取出来用,也是通过 provider 的方式。...父组件提供 getChildContext 提供数据 class Ancestor extends React.Component { getChildContext() { return...Angular2 的 providers angular 最大的特点就是实现了 ioc,也就是容器内的对象,可以声明依赖对象,然后用到的时候会自动注入。...我们知道,provider 并不关心具体对象是怎么创建的,可以动态切换多种创建策略,而 angular2提供了 4种策略:Class、Factory、Value、Exsiting 直接值: @NgModule

92810

前端代码常见的 Provider 究竟是什么

Angular2提供了创建对象的时候基于 Provider VSCode 插件中有各种 registerXxxProvider 的 api React 提供了 Provider 组件用于 context...context 的 Provider react 组件树可以组件放一些数据到 context ,然后子组件取出来用,也是通过 provider 的方式。...父组件提供 getChildContext 提供数据 class Ancestor extends React.Component { getChildContext() { return...Angular2 的 providers angular 最大的特点就是实现了 ioc,也就是容器内的对象,可以声明依赖对象,然后用到的时候会自动注入。...我们知道,provider 并不关心具体对象是怎么创建的,可以动态切换多种创建策略,而 angular2提供了 4种策略:Class、Factory、Value、Exsiting 直接值: @NgModule

1.4K30

Angular2 之 路由与导航基础知识路由模块组件路由路由守卫

一个url对应的一个页面,angular2一个组件。定义一个规则。...它还支持扩展URL路径的前提下添加路由。...如果我们让用户立即移到下一个界面,而保存却失败了(可能因为数据不符合有效性规则),我们就会丢失该错误的上下文环境。 等待服务器的答复,我们没法阻塞它 —— 这在浏览器是不可能的。...来看AdminComponent 下的子路由,我们有一个带path和children的子路由,但它没有使用component。这并不是配置的失误,而是使用组件路由。...异步加载特征模块和决定是否预加载它们,路由器调用preload方法。 preload方法有两个参数,第一个参数Route提供路由配置,第二个参数是预加载特征模块的函数。

3.2K10

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

它可以向应用的依赖注入器添加服务提供商。 Angular 模块化 模块是组织应用程序使用使用外部程序库的最佳途径。 很多Angular库都是模块,e.g.... Angular模块是由一个@NgModule装饰器提供元数据的类,元数据包括: 1-导入其他模块 2-声明哪些组件、指令、管道属于该模块 3-公开某些类,以便其他的组件模块可以使用它们...4-应用程序提供服务,以便应用的任何组件都能使用它。...那么我们提供服务的地方就有多个: 可以组件提供服务 可以模块创建中提供服务 组件提供服务 组件提供服务,它的作用范围就仅仅局限于该组件以及其子组件。 e.g....XxxModule.forRoot配置核心服务 模块的静态方法forRoot可以同时提供配置服务。 它接收一个服务配置对象,返回一个ModuleWithProviders。

2.2K30

Angular进阶教程2-

// 而useClass属性则代表使用哪个服务类来创建实例 }) 复制代码 模块中注服务 组件\color{#0abb3c}{根组件}根组件中注入的服务,在所有的子组件\color{#0abb3c...}injectors 补充上述原因: 因为Angular启动程序时会启动一个根模块,加载它所依赖的其他模块,此时会生成一个全局的根注入器,由该注入器创建的依赖注入对象整个应用程序级别可见,共享一个实例...,Angular会对延迟加载模块初始化一个新的执行上下文,创建一个新的注入器,该注入器中注入的依赖只该模块内部可见,这算是一个特殊的模块级作用域。...服务中注服务 // 这种注入方式,会告诉Angular根注入器中注册这个服务,这也是使用CLI生成服务默认的方式. // 这种方式注册,不需要再@NgModule装饰器写providers,...而且代码编译打包,可以执行tree shaking优化,会移除所有没在应用中使用过的服务

4.1K30

angular5面试题_大数据面试题

依赖就是具有一系列功能的服务(service), 应用程序的各种组件和指令(derictives)可能需要服务的功能。...Angular提供了一种平滑的机制,通过它我们可以将这些依赖项注入我们的组件和指令。因此,我们只是构建依赖关系,这些依赖关系可以应用程序的所有组件之间注入。...Angular提供两种编译类型: JIT(Just-in-Time) compilation AOT(Ahead-of-Time) compilation 区别在于,JIT编译,应用程序在运行时浏览器内部进行编译...模块通过导出或隐藏这些元素来决定其他模块是否可以使用组件,指令等。 每个模块都使用@NgModule装饰器定义。 Root Module和Feature Module的区别。...本站仅提供信息存储空间服务拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

4.3K20

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

NgModule 用来控制组件、指令、管道等是否可以使用,处于同一个 NgModule 里面的组件默认互相可见,而对于外部的组件来说,只能看到 NgModule 导出( exports )的内容,也就是说...,如果你定义的 NgModule exports 任何内容,那么外部使用者即使 import 了你这个模块,也没法使用里面定义的任何内容。...httpModule、路由等)   export:[],//声明出应用给其他的module使用   providers: [], //注入服务到当前模块   bootstrap: []//默认启动哪个组件...loadChildren的属性值由三部分组成: 需要导入Module的相对路径 #分隔符 导出模块类的名称 (3)预加载 使用懒加载的情况下,路由第一次加载某个模块,有时反应有延迟。...,需要在组件的ts文件引入MainService (3)main.module.ts引入各组件(包括自身、路由配置文件所用到的所有组件以及路由的module) import { FormsModule

3.1K30

Angular Provider 作用域

当你注册根级别的服务,Angular 会创建一个单独的共享服务实例。如果在 @Injectable 元数据中注服务,Angular 会在构建阶段自动剔除无用的服务,进而优化我们的应用程序。...因此当我们在跟模块配置某个服务后,这个服务将在整个应用程序可用。需要注意的是非懒加载的特性模块,如果我们也注册了同一个服务根模块和特性模块使用一个服务实例,即服务是单例的。...这是因为对于懒加载的模块来说,它会基于模块内配置的 providers 创建一个子注入器,以上面的示例来说,就是 UserModule 获取 UserService 服务,会创建一个新的 UserService...如果在多个特性模块使用一个 token 注册 provider,此外在根模块同样也注册了相同的 provider,只有根模块中注册的 provider 会被添加到根注入器,此后所有的特性模块将会共享同一个实例...当在懒加载的模块中使用模块外的服务,它将使用根注入器创建的服务实例。但如果已经懒加载模块中注册了 provider,模块内获取对应的服务,它将从模块的子注入器获取对应的服务实例。

1.8K20

Angular系列教程-第五节

它会标出该模块自己的组件、指令和管道,通过 exports 属性公开其中的一部分,以便外部组件使用它们。 NgModule 还能把一些服务提供商添加到应用的依赖注入器。...导入其它带有组件、指令和管道的模块,这些模块的元件都是本模块所需的。 提供一些供应用的其它组件使用服务。 每个 Angular 应用都至少有一个模块,也就是根模块。...每个组件都应该(且只能)声明(declare)一个 NgModule。 如果你使用了未声明过的组件,Angular 就会报错。 declarations 数组只能接受可声明对象。...依赖注入 Angular ,要把一个类定义为服务,就要用 @Injectable() 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入到组件。...3.路由 在用户使用应用程序时,Angular 的路由器能让用户从一个视图导航到另一个视图。

2.9K20

Angular 6+依赖注入使用指南:providedIn与providers对比

创建一个新的对象实例,依赖注入系统将会提供依赖对象(称为依赖关系) - Angular Docs 我们的组件服务都是类,每个类都有一个名为constructor的特殊函数,当我们想要在我们的应用程序创建该类的对象...在这种情况下,服务不是单例的,每次我们一个组件的模板中使用组件,我们都会获得所提供服务的新实例。 这也意味着服务实例将与组件一起销毁.........从技术上讲,'root'代表 AppModule ,但Angular足够聪明,如果该服务只是惰性组件/服务中注入,那么它只会绑定在延迟加载的bundle。...只有当服务被真正注入其他惰性组件,它才会打包到服务 新语法能在 @Component和 @Directive中使用吗? ,它们并不能。...当消费者应用程序只需要可用库功能的一个子集,它也处理的非常好。只有真正使用的东西才会打包进我们的应用程序,我们都希望打包出来的文件越小越好。

2.7K11
领券