工厂和值声明提供器

去除product2的providers声明，现在product1组件和product2 组件共用appmodule的提供器，是使用同一个服务获取商品信息，修改app.module的提供器声明，通过随机数来获取不同的服务，但是product1和product2组件获取的商品信息是相同的，这意味着工厂方法创建的对象是单例对象

providers: [{
  provide: ProducutService,
  useFactory: () => {
    let logger = new LoggerService();
    let dev = Math.random() > 0.5;
    if (dev) {
      return new ProductService(logger);
    }else {
      return new AnotherProductService (logger)
    }
  }
}, LoggerService],

如何在ProductService的工厂方法里去使用LoggerService的提供器，声明第三个参数deps，是一个数组用于声明工厂方法所依赖的参数，angular将会使用LoggerService的提供器，来实例化一个LoggerService实例，将其注入到ProductService的工厂方法的参数中

providers: [{
  provide: ProducutService,
  useFactory: (logger: LoggerService) => {
    let dev = Math.random() > 0.5;
    if (dev) {
      return new ProductService(logger);
    }else {
      return new AnotherProductService (logger)
    }
  },
  deps: [LoggerService]
}, LoggerService],

这里实例化哪一个对象是有一个随机数决定的，但是在真实的项目中通常是依赖一个变量来决定实例化哪个实现类，将变量像服务一样依赖注入
添加第三个启动器，这个启动器的provide中不在是一个类，而是一个字符串，第二个参数也不相同，是useValue，在useValue中的值既可以是一个值，也可以是一个对象

providers: [{
  provide: ProducutService,
  useFactory: (logger: LoggerService, isDev) => {
    if (isDev.adev) {
      return new ProductService(logger);
    }else {
      return new AnotherProductService (logger)
    }
  },
  deps: [LoggerService, "IS DEV ENV"]
}, LoggerService,
  {
    provide: "IS DEV ENV", useValue: {adev: false}
  }],

注入器的层级关系

应用级注入器，APPModule中除了声明的提供器会被注册，这个模块中import引入的所有其他的模块中声明的提供器都会被注册
应用级的注入器会创建一个组件级的注入器，并将组件级的提供器注册到组件级的注入器中
同样的组件级的注入器会创建一个子组件级的注入器，最终应用中会形成一组注入器，这些注入器的层级和提供器一样的层级关系，angular只有一个依赖注入点，那就是它的构造函数

改造项目

新建一个product service，定义商品信息和评论信息数组，定义三个函数getProducts，getProduct(id:number)，getCommentsForProductId(id: number)，获取所有商品信息，根据一个商品的id导出一个商品将它返回，，根据商品的id获取商品的评论

export  class ProductService {
  

  constructor() {}

  getProducts(): Product[] {
    return this.products;
  }
  getProduct(id:number): Product {
    return this.products.find((product)=>product.id === id);
  }

  getCommentsForProductId(id: number):Comment[]  {
    return this.comments.filter((comment:Comment)=>comment.producctId === id);
  }

}
export class Product {
  constructor(
    public id:number,
    public title:string,
    public price:number,
    public rating:number,
    public desc:string,
    public categories:Array<string>
  ) {

  }
}

export  class Comment {
  constructor(
    public id: number,
    public producctId:number,
    public timestamp:string,
    public user:string,

    public rating:number,
    public content:string,

  ) {}

}

设计商品详情界面，包含商品信息和评论，评论包括用户名，用户评论和用户评分，也是通过之前定义的数组中引入这些信息并使用

<div class="thumbnail">
  <img  src="http://placehold.it/820x230" >
  <div>
    <h4 class="pull-right">{{product.price}}元</h4>
    <h4>{{product.title}}</h4>
    <p>{{product.desc}}</p>
  </div>
  <div>
    <p class="pull-right">{{comments.length}}</p>
    <p>
      <app-start [rating]="product.rating" ></app-start>
    </p>
  </div>
</div>


<div class="well">

  
  <div class="row" *ngFor="let comment of comments">
    <hr>
    <div>
      <div class="col-md-12">
        <app-start [rating]="comment.rating"></app-start>
        <span>{{comment.user}}</span>
        <span class="pull-right">{{comment.timestamp}}</span>
        <p></p>
        <p>
          {{comment.content}}
        </p>
      </div>
    </div>
  </div>
</div>