Angular英雄指南教程-遇到的坑-服务注入

最新推荐文章于 2024-04-14 13:44:52 发布

原创最新推荐文章于 2024-04-14 13:44:52 发布 · 5.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Angular #服务注入

Angular 专栏收录该内容

1 篇文章

订阅专栏

首先给出Angular的入门示例
英雄指南教程 的链接地址（这个入门级 app 包含很多数据驱动的应用所需的特性。它需要获取并显示英雄的列表、编辑所选英雄的详情，并且在英雄数据的不同视图之间导航。）

https://www.angular.cn/tutorial

我的Angular CLI信息：

Angular CLI: 1.7.4
Node: 8.9.3
OS: win32 x64
Angular:
...

在按照官网说给的示例在创建服务后并没有下面的这个：providedIn: ‘root’，而且也不能把它写在@Injectable注解里面，vscode编辑器会提示@Injectable不接收任何参数。

@Injectable({
  providedIn: 'root',
})

这里写图片描述

直接运行会报找不到服务提供者 [NullInjectorError: No provider for HeroService!]：
这里写图片描述

百度了网上各大神的解决方法，找到一个是在所需要该服务的模板中的@Component注解中加入 providers:[] 属性进行服务注入，如下图。如果想要在其它服务中调用自己的服务，可以在全局的app.module.ts中的@NgModule标签加入providers:[] 注入服务。

关于服务中调用服务这个问题，参考同事的说法可以有下面2个方法：
方法一：是在一个全局的app.module.ts中进行注册（如上文所述）；
方法二：新建一个module，在新建的module里面注册需要调用的(子)服务之后在全局module中引入这个新建的module即可（因为module只能被module引用，所以不能在服务中引用module）。

@Component({
  selector: 'app-messages',
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.css'],
  //组件中注入服务（还可以在全局模块（app.module.ts）中注入服务）
  providers:[
    MessageService
  ]
})

这里写图片描述