Angular依赖注入实例

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();
  }
}

知识点来自慕课视频。