这篇文章主要为大家展示了“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<AppConfig>('描述令牌的用途');
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中依赖注入的概念分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!