angular4 提供器provide

提供器provide用于依赖注入，即将服务或组件在provides声明之后，声明了@Injectable注解的服务或@Component的组件才能注入该服务和组件。

1.创建服务类：

使用命令$ ng g service ProductService声明的一个服务类

productService.ts

/**
 * 使用命令$ ng g service ProductService声明的一个服务类
 * @Injectable():使用了这个注解的服务，才能注入其他服务
 */
@Injectable()
export class ProductService {

  constructor(public logger:LoggerService) { }

  getProduct():Product{
    this.logger.log("getProduct方法被调用");
    return new Product(0,"iphone7",5899,"最新款苹果");
  }

}
export class Product{
  constructor(
    public id:number,
    public title:string,
    public price:number,
    public desc:string
  ){}
}

 

2.声明提供器provide

app.module.ts

//ProductService在提供器provices中声明之后才能被使用,也可以在组件中声明provide，参见product,
  //1.在模块中声明的提供器，对所有组件可用
  // providers: [ProductService,LoggerService],
  /**
   * 使用useFactory工厂方法声明提供器
   * 使用工厂方法声明的提供器是一个单例对象
   * 这边有三个提供器，第一个是工厂方法，
   * 第二个是LoggerService相当于（provide:LoggerService,useClass:LoggerService）
   * 第三个使用了值声明提供器
   * 工厂方法参数分别注入了二和三两个提供器，所以需要在deps参数中声明
   */
  providers: [
  //1
  {
    provide:ProductService,
    useFactory:(logger:LoggerService,isDev) =>{
      if(isDev){
        return new ProductService(logger);
      }else{
        return new AnotherProductService(logger);
      }
    },
    deps:[LoggerService,"IS_DEV_ENV"],
  },
  //2
  LoggerService,
  //3
  {
    provide:"IS_DEV_ENV",useValue:false
  }
],

 

 

3.注入productService服务类

product.component.ts

import { Component, OnInit } from '@angular/core';
import { Product, ProductService } from '../shared/product.service';
import { AnotherProductService } from '../shared/another-product.service';

//@Component是@Injectable()的子类，所以可以注入服务
@Component({
  selector: 'app-product2',
  templateUrl: './product2.component.html',
  styleUrls: ['./product2.component.css'],
  //1.在模块中声明的提供器，对所有组件可用
  //2.在组件内部声明提供器，只对该组件和其子组件可见
  //3.组件内部的提供器，优于模块中的声明的
  //4.提供器应该优先声明在模块中，只有当对其他组件不可见时才声明在组件内部
  // providers:[{
  //   provide:ProductService,useClass:AnotherProductService
  // }]
})
export class Product2Component implements OnInit {

  product:Product;

  //注入ProductService：该服务必须在app.module.ts中的provides中声明才能注入
  constructor(private productService:ProductService) { }

  ngOnInit() {
    this.product=this.productService.getProduct();
  }

}

也可以在服务类中注入，需要@Injectable声明