Angular学习笔记03——依赖注入

260 阅读1分钟

##依赖注入 依赖注入:Dependency Injection(DI)
控制反转:Inversion of Control(IOC)
优点:松耦合,提高代码可复用性,提高可测试性
实现方式:

@NgModule({
	providers:[ProductService]//提供器
	//声明需要依赖注入的对象
	//等同于providers:[{provide:ProductService,useClass:ProductService}]
	//等同于providers:[{provide:ProductService,useClass:AnotherProductService}]
	省略其他配置
})
export classAppModule{}

@Component({
...省略组件配置
})
export class ProductComponent{
	product: Product;
	//构造方法实现依赖注入
	constructor(productService: ProductService){//注入器
		this.product = productService.getProduct();
	}
}

####注入器 constructor(productService: ProductService){} ####提供器 providers:[ProductService]
providers:[{provide:ProductService,useClass:ProductService}]
providers:[{provide:ProductService,useClass:AnotherProductService}]
providers:[{provide:ProductService,useFactory:() =>{...}] ###提供器作用域 1、若提供器声明在app模块中,则对所有组件课件
2、若提供器声明在组件中时,则只对声明它的组件及其子组件可见
3、若声明在模块中的提供器和声明在组件中的提供器的token一致的时候,组件中的提供器会覆盖模块中的提供器
4、优先在模块中声明

###@Injectable()装饰器 该注解装饰器表明被注解的这个类是否可以依赖注入其他类

###工厂提供器的使用 代码示例:

  imports: [
    BrowserModule
  ],
  providers: [{
    provide: ProductService,
    useFactory: (logger: LoggerService, myvalue) => {
      //   // tslint:disable-next-line:prefer-const
      //   let logger = new LoggerService();
      //   // tslint:disable-next-line:prefer-const
      //   let dev = Math.random() > 0.5;
      //   if (dev) {
      //     return new ProductService(logger);
      //   } else {
      //     return new AnotherProductService(logger);
      //   }
      if (myvalue.abc) {
        return new ProductService(logger);
      } else {
        return new AnotherProductService(logger);
      }
    }, deps: [LoggerService, 'MY_VALUE']

  }, LoggerService,
  {
    provide: 'MY_VALUE', useValue: { abc: true }
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }