工厂和值声明提供器
- 去除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>
