• 技术文章 >web前端 >js教程

    深入浅析Angular中的依赖注入

    青灯夜游青灯夜游2021-09-08 11:06:41转载112
    什么是依赖注入?本篇文章带大家了解一下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中的依赖注入的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:Angular 依赖注入
    上一篇:JavaScript能做什么的 下一篇:怎么查看nodejs安装路径
    线上培训班

    相关文章推荐

    • 带你详细了解Angular中的变更检测• Angular怎么构建组件?3种方法介绍• 如何快速入门angular12?入门指南分享• 浅谈Angular组件之间通信的5种方法• 手把手教你使用Angular CDK Portal创建动态内容

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网