[JavaScript知识库]angular---依赖注入

1 通过@Injectable装饰器注入，让引用此模块的使用?

// hero.service.ts
import { Injectable } from '@angular/core';  //导入依赖注入模块
import { HEROES } from './mock-heroes';


@Injectable({
/*
'root'：在大多数应用程序中是指应用程序级注入器。

'platform' ：页面上所有应用程序共享的平台注入器的特殊单例。

'any'：在每个惰性加载的模块中提供一个唯一的实例，而所有急性加载的模块共享一个实例

*/
  providedIn: 'root',  //注入到项目根级，相当于项目所有组件都可使用此服务
})


export class HeroService {
  getHeroes() { return HEROES; }
}

// hero.components.ts  注入方式
import {HeroService} from 'hero.service.ts'
constructor(heroService: HeroService) // 在constructor中引入此服务，则此组件可以使用这个类下的方法与属性

2 通过@NgModule装饰器注入

// app.module.ts
import { DIComponent } from './components/di/di.component';
import {DIComponentService} from './DIComponentService'
@NgModule({
  declarations: [DIComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [
    DIComponentService, // 1 这是下面一行代码的简写形式，即provide和useClass一致时
    // {provide:DIComponentService,useClass:DIComponentService,
    // 2 使用一个已经定义过的服务,此服务必须在providers中存在
    {provide:DIComponentService,useExisting:DIComponentService},

    //3 useValue,提供一个简单的字符串
     { provide: Logger, useValue: 'simpleValue' }，
    //4 useValue,provide为字符串形式，useValue也为字符串形式，此类型注入方式需要加@Inject装饰器，参照注入方式二
    { provide: 'httpApi', useValue: '123.com' }
  ],
  bootstrap: [AppComponent],
})


// hero.component.ts  注入方式一
import {HeroService} from 'hero.service.ts'
constructor(heroService: HeroService) // 在constructor中引入此服务，则此组件可以使用这个类下的方法与属性

// hero.component.ts  注入方式二

class AppComponent {
  constructor(@Inject('httpApi') readonly api){}
}

3 通过@Component装饰器组件内注入，随组件存在而存在

// NgmoduleProvidersComponent.component.ts
import {ComponentInjectService} from './component-inject.service';

@Component({
    selector: 'app-ngmodule-providers',
    templateUrl: './ngmodule-providers.component.html',
    styleUrls: ['./ngmodule-providers.component.less'],
    providers: [ComponentInjectService],   // providers提供的服务在当前组件和子组件都可以使用
    // viewProviders: [ComponentInjectService], // viewProviders提供的服务在当前组件使用
})
export class NgmoduleProvidersComponent implements OnInit {
    
    constructor(private service: ComponentInjectService) {
    }

    ngOnInit() {
    }

}

4 ingectionToken?
?使用场景: ? ?想要用接口(限制值的类型)作为令牌,即提供者
?注意点: ? 需要用@Inject 装饰器注入?

// app.config.ts
import {InjectionToken} from '@angular/core';

interface AppConfig {  // 定义接口
  apiEndpoint: string;
  title: string;
}
//app.config字符串为此接口的描述,可选,会呈现的desc里面
export const APP_CONFIG = new InjectionToken<AppConfig>('app.config');

// app.module.ts
import {APP_CONFIG} from './app.config'
providers: [
  { provide: APP_CONFIG, useValue: 'tokenValue' }
],

// app.component.ts 注入方式
class AppComponent {
  constructor(@Inject(APP_CONFIG) config: AppConfig) {}
}

ngOnInit(){
console.log(this.config)  
}

参考文档：

????????https://www.jianshu.com/p/4b10948d456c?写的很详细?

????????https://angular.cn/guide/dependency-injection-providers? ? ?官网关于injecctToken