angular4基础之服务与依赖注入

服务与依赖注入

• 依赖注入就是省去了每次手动创建实例的麻烦，自动创建实例。
• 首先创建一个服务，然后将服务注入到组件使用
• 注入时需要在类前边加上@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}    }  ],