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,'微软');  }}