深入浅析Angular中的依赖注入

青灯夜游
发布: 2021-09-08 11:06:41
转载
1845 人浏览过

什么是依赖注入?本篇文章带大家了解一下Angular中的依赖注入,希望对大家有所帮助!

深入浅析Angular中的依赖注入

依赖注入概念:

维基百科对依赖注入的解释:在软件工程中,依赖注入是实现控制反转的一种软件设计模式,一个依赖是一个被其他对象(client)调用的对象(服务),注入则是将被依赖的对象(service)实例传递给依赖对象(client)的行为。

将 被依赖的对象传给依赖者,而不需要依赖者自己去创建或查找所需对象是DI的基本原则。

依赖注入允许程序设计遵从依赖倒置原则(简单的说就是要求对抽象进行编程,不要对实现进行编程,这样就降低了客户与实现模块间的耦合) 调用者(client)只需知道服务的接口,具体服务的查找和创建由注入者(injector)负责处理并提供给client,这样就分离了服务和调用者的依赖,符合低耦合的程序设计原则。也是依赖注入的主要目的。【相关教程推荐:《angular教程》】

控制反转

控制反转和依赖注入是相辅相成的。例子:classA依赖classB但是classA不主动创建classB的实例,通过参数的形式传递进来。

class A { construct(private b: B) {} } class B {} const a: A = new A(new B());
登录后复制

Angular依赖注入是实例化组件的时候,将服务的实例传递进来,形成了控制反转。

依赖注入

Angular依赖注入使用的都是一个实例,也是Angular通过服务通信的一种方式。如果不适用依赖注入,多个实例,组件间通信也就无法使用服务了。 app.module.ts:

import { BrowserModule } from '@angular/platform-browser'; import { NgModule, InjectionToken } from '@angular/core'; import { AppComponent } from './components/app/app.component'; import { SingleServiceService } from './service/single-service.service'; import { MyServiceService } from './service/my-service.service'; import { UseServiceService } from './service/use-service.service'; import { ValueServiceService } from './service/value-service.service'; import { ReactiveFormsModule, FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; export interface AppConfig { title: string } export const CONFIG = new InjectionToken('描述令牌的用途'); const USE_Config = { title: "非类的注入令牌" } @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, FormsModule, ReactiveFormsModule ], providers: [ SingleServiceService, // 完整形式 // {provide: SingleServiceService, useClass: SingleServiceService} // provide 属性存有令牌,它作为一个 key,在定位依赖值和配置注入器时使用。 // 属性二通知如何创建依赖,实际依赖的值可以是useClass、 useExisting、useValue 或 useFactory // useExisting起别名,依赖注入也可以注入组件 {provide: MyServiceService, useClass: UseServiceService}, // useValue可以是字符串,对象等 {provide: ValueServiceService, useValue: "依赖注入字符"}, // 使用 InjectionToken 对象来为非类的依赖选择一个提供者令牌 { provide: CONFIG, useValue: USE_Config } ], bootstrap: [AppComponent], entryComponents: [] }) export class AppModule { }
登录后复制

SingleServiceService:

import { Injectable } from '@angular/core'; @Injectable() export class SingleServiceService { constructor() { } }
登录后复制

MyServiceService:

import { Injectable } from '@angular/core'; @Injectable() export class MyServiceService { constructor() { } getName(): string { return "my-service"; } }
登录后复制

UseServiceService:

import { Injectable } from '@angular/core'; @Injectable() export class UseServiceService { constructor() { } getName(): string { return "use-service"; } }
登录后复制

ValueServiceService:

import { Injectable } from '@angular/core'; @Injectable() export class ValueServiceService { constructor() { } }
登录后复制

更多编程相关知识,请访问:编程视频!!

以上是深入浅析Angular中的依赖注入的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:juejin.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!