服務與依賴注入

• 依賴注入就是省去了每次手動建立例項的麻煩，自動建立例項。
• 首先建立一個服務，然後將服務注入到元件使用
• 注入時需要在類前邊加上@Injectable裝飾器
• 服務之間可以相互引用

<!--首先建立一個服務-->
//建立一個service.ts服務
import { Injectable } from '@angular/core';
import {LoggerService} from "./logger.service";//引入了服務

@Injectable()//裝飾器  

//不管是被使用，還是使用其他的服務都需要新增這個裝飾器
export class ProductService {//匯出服務
 


  constructor(public logger:LoggerService) {}//注入服務

  getProduct(): Product {//這個服務的一些方法
    this.logger.log("getProduct方法被呼叫");
    return new Product(0, "iPhone7", 5899, "最新款蘋果手機");
  }

}

export class Product {//建立一個物件
  constructor(
    public id:number,
    public title:string,
    public price:number,
    public
 
 desc:string
  ){
  }
}

• 然後在其他的方引入服務，也就是依賴注入

import {Component, OnInit} from "@angular/core";
import {Product, ProductService} from "../shared/product.service";

@Component({//Component裝飾器包含Injectable()裝飾器所以不需要再次引入
  selector: 'app-product1',
  templateUrl: './product1.component.html',
  styleUrls: ['./product1.component.css'
 
]
})
export class Product1Component implements OnInit {

  product: Product;

  constructor(private productService:ProductService) { //注入服務
  }
  ngOnInit() {
  //使用服務的方法
    this.product = this.productService.getProduct();
  }

  name:string = "Tom"

}

• 所有的服務要想使用必須在模組中宣告

//在app.module.ts檔案的providers中 引入
 providers: [
  provide: ProductService
  ]

• 在app.module中宣告的服務，所有的元件都可以使用。
• 也可以單獨的為每一個元件寫一個providers宣告

@Component({
  selector: 'app-product2',
  templateUrl: './product2.component.html',
  styleUrls: ['./product2.component.css'],
  providers: [ provide:ProductService
  ]//單獨為一個元件宣告服務
})
export class Product2Component implements OnInit {
  product: Product;
  constructor(private productService:ProductService) { }
  ngOnInit() {
    this.product = this.productService.getProduct();
  }

}

• 關於服務的引入順序問題
  
  • 當父元件引入一個服務後它的子元件也可以使用這個服務
  • 當元件引入的服務與app.module.ts中的服務重名時，將會使用元件中的服務，這個順序為：子元件>父元件>全域性服務。
• 服務的詳細使用

@Component({
  selector: 'app-product2',
  templateUrl: './product2.component.html',
  styleUrls: ['./product2.component.css'],
  //這裡也是宣告，但是這個服務有兩個實現類，
  //所以後邊那個useClass決定了使用這個服務的那個實現類。
  providers: [ provide:ProductService,useClass: anotherProductService
  ]
})
export class Product2Component implements OnInit {
  product: Product;
  constructor(private productService:anotherProductService) {//注入 productService的anotherProductService實現類
  }
  ngOnInit() {
    this.product = this.productService.getProduct();
  }

}
//第一個服務類
@Injectable()
export class ProductService {
  constructor(public logger:LoggerService) {}
  getProduct(): Product {
    this.logger.log("getProduct方法被呼叫");
    return new Product(0, "iPhone7", 5899, "最新款蘋果手機");
  }
}
export class Product {//建立一個物件
  constructor(
    public id:number,
    public title:string,
    public price:number,
    public desc:string
  ){
  }
}

//第二個服務類
@Injectable()
export class AnotherProductService implements ProductService{
  getProduct(): Product {
    return new Product(1, "sumsung7", 4899, "最新款三星手機")
  }
  constructor(public logger:LoggerService) { }

}

• 工廠和值宣告提供器

  providers: [
  {
  //聲明瞭一個提供器服務
    provide: ProductService,
    //為這個服務寫了一個工廠，當有元件使用這個服務時會自動執行這個工廠的內容處理。
    useFactory: (logger:LoggerService, appConfig) => {
    //這裡傳入了兩個值，這兩個值從下邊的deps獲得
      if(appConfig.isDev){
        return new ProductService(logger);
      }else{
        return new AnotherProductService(logger);
      }
    },
    //這是要傳入的值，這就是值傳遞
    deps:[LoggerService,//當涉及到別的服務時，會自動呼叫別的服務處理
    "APP_CONFIG"]
  },
  LoggerService,
    {//這裡也可以宣告值，被別的服務引用。這裡聲明瞭一個數組值
      provide: "APP_CONFIG", useValue: {isDev: false}
    }
  ],