##依赖注入
依赖注入: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 { }