1.当提供器声明在模块中时:(它是对所有组件可见的,所有组件都可以注入它)
先注册服务shared/product:
输入命令:ng g service shared/product(生成一个服务在shared包中)
product.service.ts:
import { Injectable } from '@angular/core';
@Injectable() //装饰器:这个ProductService也可以通过构造函数注入其他服务,只是构造函数,如果注入到其他地方只能通过模板中是否有注入来控制
export class ProductService {
constructor() { } //构造函数
getProduct(): Product {
return new Product(0, 'iPhoneX', 8888, '最新苹果手机');
}
}
export class Product {
constructor(
public id: number,
public title: string,
public price: number,
public desc: string
) {}
}
在模板中声明:
app.module.ts:
@NgModule({
providers: [ProductService] // 在providers中注入ProductService
})
在product1组件中注入这个服务:
product1.component.ts:
export class Product1Component implements OnInit {
product: Product;
constructor(private productService: ProductService) { } // 注入提供器
ngOnInit() {
this.product = this.productService.getProduct(); // 调用服务中的getProduct()
}
}
2.当提供器注入在一个组件时(他只对其声明的组件可见及其子组件可见)
3.当声明在模块中的提供器和声明在组件中的提供器具有相同的token时,声明在组件中的提供器会覆盖模块中的提供器(一般优先把提供器声明在模板中)
先注册服务shared/anotherProduct:
输入命令:ng g service shared/anotherProduct(生成一个服务在shared包中)
another-product.service.ts:
@Injectable({
providedIn: 'root'
})
export class AnotherProductService implements ProductService {//继承了上面的product.service.ts
getProduct(): Product {
return new Product(1, 'iphone8', 5888, '苹果8');
}
constructor() { }
}
在product2组件中注入这个服务:
product2.component.ts:
@Component({
providers: [{ // 添加这一项来注入提供器
provide: ProductService, useClass: AnotherProductService
}]
})
export class Product2Component implements OnInit {
product: Product;
constructor(private productService: ProductService) { }
ngOnInit() {
this.product = this.productService.getProduct();
}
}
知识点来自慕课视频。