Angular4 第四章 依赖注入实战

创建服务的命令：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,'微软');
  }

}