Angular学习笔记3--依赖注入

基本用法

1.创建服务
ng g service product/product
2.编写服务

getProduct(): Product {
  return new Product('123', 'productName')
}
getProduct(): Product {
    return new Product('123', 'productName')
  }

3.添加配置

@NgModule({
  providers: [ProductService]
})

4.使用

private productId: string;
private productName: string;
constructor(private productService: ProductService) {
}
ngOnInit() {
  this.productId = this.productService.getProduct().id;
  this.productName = this.productService.getProduct().name;
}

基于原有服务提供的服务

1.创建服务
2.编写服务

export class AnotherProductService implements ProductService{
  getProduct(): Product {
    return new Product("aaaaa", "another-product");
  }
}

3.在component中添加配置

@Component({
  providers: [{provide: ProductService, useClass: AnotherProductService}]
})

4.使用

private productId: string;
private productName: string;
constructor(private productService: AnotherProductService) { 
ngOnInit() {
  this.productId = this.productService.getProduct().id;
  this.productName = this.productService.getProduct().name;
}

工厂函数提供器

providers: [{
    provide: ProductService,
    useeFactory: (logger: LoggerService, appConfig) => {
      if (appConfig.isDev) {
        return new ProductService(logger);
      } else {
        return new AnotherProductComponent(logger);
      }
    },
    deps: [LoggerService, "APP_CONFIG"]
  }, LoggerService, 
  {
    provide: "APP_CONFIG", useValue: {isDev: false}
  }]