工厂和值声明提供器

工厂和值声明提供器

1. 去除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],

2. 如何在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],

3. 这里实例化哪一个对象是有一个随机数决定的，但是在真实的项目中通常是依赖一个变量来决定实例化哪个实现类，将变量像服务一样依赖注入
4. 添加第三个启动器，这个启动器的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}
  }],

---

注入器的层级关系

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

---

改造项目

1. 新建一个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
  ) {

  }
}

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

    public rating:number,
    public content:string,

  ) {}

}

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

  
  

    
{{product.price}}元
    
{{product.title}}
    
{{product.desc}}
  
  

    
{{comments.length}}
    

      
    
  





  
  

    

    

      

        
        {{comment.user}}
        {{comment.timestamp}}
        

        

          {{comment.content}}