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