解决angular依赖注入的弱依赖实现解耦

解决angular依赖注入的弱依赖实现解耦

在angular的官方hero的demo中依赖注入的使用为

import { Component } from '@angular/core';
import { ProjectService } from './services/project.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'weak-depend';
  constructor(public projectSer: ProjectService) {

  }
}

public projectSer: ProjectService 表明依赖注入的具体类
这样有一个缺点，当封装一个module时需要provider一个service，而这个service是外部的一个service，比如我现在这项目下有一个页面我需要知道这个项目详细相关信息，如果不解耦，必要在这个module中引入这个ProjectService，就形成了强依赖关系，违背设计原则。
有时我们的module是用loadchildren引入的参数传递很不方便，所以要解决外部依赖问题。

解决办法

如： 新建一个other的module，在other下的component需要依赖projectService，但是却只是需要部分属性
所以

import { Component, OnInit, Inject } from '@angular/core';
interface IProjectService {
  projectId: number
}
@Component({
  selector: 'app-other',
  templateUrl: './other.component.html',
  styleUrls: ['./other.component.css']
})
export class OtherComponent implements OnInit {

  constructor(@Inject('ProjectService') public  projectSer: IProjectService) { }

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

}

用inject来注入，用一个interface来定义类型，这样可与真实的ProjectService解耦

provide这个类

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ProjectService } from './services/project.service';
import { OtherModule } from './other/other.module';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    OtherModule
  ],
  providers: [
    ProjectService,
    {
      provide: 'ProjectService',
      useExisting: ProjectService
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

因为在真实项目中ProjectService可能早就注入了，所以用useExisting

向模块中导入配置类Service

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    OtherModule
  ],
  providers: [
    ProjectService,
    {
      provide: 'ProjectService',
      useExisting: ProjectService
    },
    {
        provide: 'ConfigService',
        useValue: {
            name: 'zengwe'
        }
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在需要的地方用@Inject注入就行

总结

灵活的用好
{provide:‘string’, useExisting: className}
{provide:‘string’, useClass: className}
{provide:‘string’, useValue: value}
{provide:‘string’, useFactory: Factory}
即可解决强依赖问题