Angular Providers

一直以来对 Angular Providers 这部份都还是有存在着半知半解的状态，就趁着这次机会一次搞懂它吧！

Providers 提供了四种注入方式

Class Provider : useClass
Value Provider: useValue
Factory Provider: useFactory
Aliased Class Provider: useExisting

useClass

将 service 的服务注入进来

product.ts

export class Product {
  constructor(productID: number, name: string, price: number) {
    this.productID = productID;
    this.name = name;
    this.price = price;
  }

  productID: number;
  name: string;
  price: number;
}

product.service

import { Injectable } from "@angular/core";
import { Product } from "./product";

@Injectable()
export class ProductService {
  constructor() {}

  public getProducts() {
    let products: Product[];
    products = [new Product(1, "Memory Card", 100)];
    return products;
  }
}

component.ts

@Component({
  ...略
  providers: [ProductService],
})

export class AppComponent implements OnInit {
  constructor(
    private productService: ProductService,

  ) {
    cosnole.log(
      this.productService.getProducts()
      // {productID: 1, name: 'Memory Card', price: 100}
    )
  }
}

useValue

直接在 providers 里的 useValue 设定想提供的值


const APP_CONFIG = Object.freeze({
  serviceURL: 'mtwmt.github.io',
  IsDevleomentMode: true,
});

@Component({
  ...略
  providers: [
    { provide: 'USE_FAKE', useValue: true },
    { provide: 'APP_CONFIG', useValue: APP_CONFIG },
    {
      provide: 'FUNC',
      useValue: () => {
        return 'hello world';
      },
    },
    {
      provide: TestService,
      useClass: TestService,
    },
  ],
})

export class AppComponent implements OnInit {
  constructor(
    @Inject('USE_FAKE') public useFake: string,
    @Inject('APP_CONFIG') public appConfig: any,
    @Inject('FUNC') public func: any
  ) {
    cosnole.log(
      useFake,  // true
      appConfig,
      // {
      //   serviceURL: 'mtwmt.github.io',
      //   IsDevleomentMode: true,
      // }
      func() // hello world
    )

  }
}

useFactory

有时後会需要拿 useValue 的值注到其他服务里做判断，这时後就可以使用 useFactory，来处理一些逻辑上的事情

续上例：

这里多做了一个 MoreProductService

more-product.service

import { Injectable } from "@angular/core";
import { Product } from "./product";

@Injectable()
export class MoreProductService {
  constructor() {}

  public getProducts() {
    let products: Product[];

    products = [
      new Product(1, "Memory Card", 500),
      new Product(2, "Pen Drive", 750),
      new Product(3, "Power Bank", 100),
      new Product(4, "Laptop", 10000),
      new Product(5, "Desktop", 100),
    ];
    return products;
  }
}

component.ts

import { Component, Inject, VERSION } from "@angular/core";
import { MoreProductService } from "./more-product.service";
import { ProductService } from "./product.service";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  providers: [
    MoreProductService,
    {
      provide: "GET_MORE",
      useValue: false,
    },
    {
      provide: ProductService,
      // 取得 GET_MORE 的 value，判断要产生的实体
      useFactory: (isMore) => {
        return isMore ? new MoreProductService() : new ProductService();
      },
      // 注入相依的 service
      deps: ["GET_MORE", MoreProductService],
    },
  ],
})
export class AppComponent {
  products = [];

  constructor(
    @Inject("GET_MORE") public getMore: string,
    private productService: ProductService
  ) {
    this.products = this.productService.getProducts();
  }
}