建立服務的命令：ng g service shared/stock  ，生成了stockService的服務，需要宣告該服務的提供器

建立元件stock  :   ng g component stock

1.依賴注入，提供器宣告在模組中

（1）編寫服務提供器。shared\stock.service.ts 編寫一個股票資訊類，和一個getProduct方法，

import { Injectable } from '@angular/core';
@Injectable()
export class StockService {

  constructor() { }
  getStock():Stock{
    return new Stock(1,'IBM');
  }
}
export class Stock{
  constructor(public id :number,public name:string){
  }
}
 

（2）編寫注入器。stock\stock.component.ts中呼叫服務類StockService中getStock()方法

import { Component, OnInit } from '@angular/core';
import { StockService, Stock } from '../shared/stock.service';

@Component({
  selector: 'app-stock',
  templateUrl: './stock.component.html',
  styleUrls: ['./stock.component.css']
})
export class StockComponent implements OnInit {
  private stock:Stock;
  constructor(public stockService:StockService) { }

  ngOnInit() {
    this.stock=this.stockService.getStock();
  }

}
 

（3）宣告提供器。app.component.ts加入

providers: [StockService],

上述程式碼是將提供器宣告在模組中，提供器也可以宣告在元件中

建立新元件stock2

建立新服務shared/anotherStock

2 依賴注入，提供器宣告在元件中

（1）編寫服務提供器。shared\another-stock.service.ts 中的AnotherStockService繼承了StockService，需要實現StockService中方法getStock()

import { Injectable } from '@angular/core';
import { StockService, Stock } from './stock.service';

@Injectable()
export class AnotherStockService implements StockService {
  getStock(): Stock {
     return new Stock(2,'微軟');
  }

  constructor() { }

}
 

（2）編寫注入器和宣告提供器。stock2\stock2.component.ts中,將提供器宣告在組建中，並呼叫AnotherStockService中的getStock()方法

import { Component, OnInit } from '@angular/core';
import { StockService, Stock } from '../shared/stock.service';
import { AnotherStockService } from '../shared/another-stock.service';

@Component({
  selector: 'app-stock2',
  templateUrl: './stock2.component.html',
  styleUrls: ['./stock2.component.css'],
  providers:[{provide:StockService,useClass:AnotherStockService}]
})
export class Stock2Component implements OnInit {
  private stock:Stock;
  constructor(private stockService:StockService) { }

  ngOnInit() {
    this.stock=this.stockService.getStock();
  }

}

3.提供器的作用域

（1）提供器宣告模組中，對所有元件可見，所有元件都可以注入

（2）提供器宣告在元件，只對宣告他的元件和其子元件可見，其他元件不可以注入他

（3）當宣告在模組中提供器的token和宣告在元件中token一樣時，那麼元件中的提供器會覆蓋模組中的提供器

（4）優先將提供器宣告在模組中，只有提供器對某些元件不可見時，才將提供器宣告在元件中

@Injectable()//表示當前服務StockService的建構函式可以注入其他服務 @Component()繼承@Injectable

4.服務注入服務

新建服務logger，原服務stockService,在StockService中注入LoggerService

(1)提供器編寫LoggerService

import { Injectable } from '@angular/core';

@Injectable()
export class LoggerService {

  constructor() { }
  log(message:string){
    console.log(message);
  }

}

（2）在StockService中注入LoggerService,並呼叫LoggerService中的log()方法

import { Injectable } from '@angular/core';
import { LoggerService } from './logger.service';
@Injectable()  //表示當前服務StockService的建構函式可以注入其他服務
export class StockService {

  constructor(public logger:LoggerService) { }
  getStock():Stock{
    this.logger.log("getStock方法被呼叫");
    return new Stock(1,'IBM');
  }
}
export class Stock{
  constructor(public id :number,public name:string){

  }
}

（3）在模組中宣告LoggerService

providers: [StockService,LoggerService],

（4）因為AnotherStockService繼承了StockService，所以AnotherStockService也必須注入LoggerService

import { Injectable } from '@angular/core';
import { StockService, Stock } from './stock.service';
import { LoggerService } from './logger.service';

@Injectable()
export class AnotherStockService implements StockService {
  constructor(public logger:LoggerService) { }
  getStock(): Stock {
     return new Stock(2,'微軟');
  }

}