深入浅析Angular中的依赖注入

什么是依赖注入？本篇文章带大家了解一下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中的依赖注入的详细内容，更多请关注亿码酷站其它相关文章！

深入浅析Angular中的依赖注入
—–文章转载自PHP中文网如有侵权请联系ymkuzhan@126.com删除

27410288普通用户

收藏 海报 链接