Angular Service依赖注入的一个具体例子

Angular service 相当于 SAP Commerce Cloud 里的 service facade.

使用如下的命令行创建Angular service：

ng generate service hero

默认生成的hero.service.ts

You must make the HeroService available to the dependency injection system before Angular can inject it into the HeroesComponent by registering a provider. A provider is something that can create or deliver a service; in this case, it instantiates the HeroService class to provide the service.

Provider负责实例化 service.

看这段TypeScript代码：

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

When you provide the service at the root level, Angular creates a single, shared instance of HeroService and injects into any class that asks for it. Registering the provider in the @Injectable metadata also allows Angular to optimize an app by removing the service if it turns out not to be used after all.

一个最佳实践：

While you could call getHeroes() in the constructor, that’s not the best practice.
Reserve the constructor for simple initialization such as wiring constructor parameters to properties. The constructor shouldn’t do anything. It certainly shouldn’t call a function that makes HTTP requests to a remote server as a real data service would.
Instead, call getHeroes() inside the ngOnInit lifecycle hook and let Angular call ngOnInit() at an appropriate time after constructing a HeroesComponent instance.

尽量不要在构造函数里编写任何应用逻辑，而是把这些逻辑放到生命周期钩子 ngOnInit里。

在需要使用service 的Component里，首先import service的实现：

使用构造函数参数的方式进行依赖注入：

The parameter simultaneously defines a private heroService property and identifies it as a HeroService injection site.

构造函数参数注入之后，自动生成一个私有的属性，名为heroService，就可以使用该服务了。

运行时效果：

从运行时可以看到，Component构造函数里通过参数完成依赖注入，可以通过this.heroService直接访问注入的服务。

在service的构造函数里设置一个断点，就能观察到Angular框架是在何时实例化这个服务实例的：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Angular Service依赖注入的一个具体例子相关推荐

Angular 4 依赖注入教程之一依赖注入简介
目录 Angular 4 依赖注入教程之一依赖注入简介 Angular 4 依赖注入教程之二组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 ...
Angular依赖注入的一个例子和注入原理单步调试
定义一个抽象服务类: export abstract class GreetingService {abstract greet(name: string): string;} 定义一个具体类实现该抽 ...
Angular 通过依赖注入机制注入一个对象的例子，什么是 ElementInjector
假设我在app.config.ts里定义了一个interface AppConfig和一个对象HERO_DI_CONFIG, 我想将后者注入到一个类的构造函数里去: export interface ...
依赖注入：一个Mini版的依赖注入框架
前面的章节中,我们从纯理论的角度对依赖注入进行了深入论述,我们接下来会对.NET Core依赖注入框架进行单独介绍.为了让读者朋友能够更好地理解.NET Core依赖注入框架的设计与实现,我们按照类似 ...
Angular 依赖注入的一个常见错误 NullInjectorError, No provider for XXX
测试代码: export abstract class GreetingService {abstract greet(name: string): string;} 加了@Injectable注解的 ...
.Net Core DI依赖注入：一个接口注入多个实现类
方式一.默认就可以注入多个实现类例如接口IShow,注入ShowA和ShowB两个实现类: services.AddTransient<IShow, ShowA>(); services ...
Angular 中的依赖注入link
Angular 中的依赖注入link 依赖注入(DI)是一种重要的应用设计模式. Angular 有自己的 DI 框架,在设计应用时常会用到它,以提升它们的开发效率和模块化程度. 依赖,是当类需要执行 ...
【Angular 4】依赖注入
Angular算是将后端开发工程化引入前端的先驱之一,而Dependency injection依赖注入(后面简称为DI)又是Angular内部运作的核心功能,所以要深入理解Angular有必要先理解 ...
Angular 依赖注入
问题描述初学Angular,可能对一堆注解有些懵. 我们一起通过实例来探讨Angular的依赖注入. 一路尝试 @Injectable 一个命令建的StockService,一个手动建的TestSe ...

Angular Service依赖注入的一个具体例子

Angular Service依赖注入的一个具体例子相关推荐

最新文章

热门文章