angular4基础之服务与依赖注入

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/fan2252228703/article/details/78116227

服务与依赖注入

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

没有更多推荐了,返回首页