angular6 依赖注入 ——学习笔记

文件目录：

product1.component.html：

<div>
	<h1>商品详情</h1>
	<h2>名称：{{product.title}}</h2>
	<h2>价格：{{product.price}}</h2>
	<h2>描述：{{product.desc}}</h2>
</div>

product1.component.ts

import { Component, OnInit } from '@angular/core';
import {Product, ProductService } from '../share/product.service';
@Component({
  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();
  }

}

product2.component.html

<div>
	<h1>商品详情</h1>
	<h2>名称：{{product.title}}</h2>
	<h2>价格：{{product.price}}</h2>
	<h2>描述：{{product.desc}}</h2>
</div>

product2.component.ts

import { Component, OnInit } from '@angular/core';
import {Product, ProductService } from '../share/product.service';
import {AnotherProductService } from '../share/anotherproduct.service';
@Component({
  selector: 'app-product2',
  templateUrl: './product2.component.html',
  styleUrls: ['./product2.component.css'],
  providers:[
  {provide:ProductService, useClass:AnotherProductService}
  ]
})
export class Product2Component implements OnInit {

  product: Product;
  constructor(private productService:ProductService) {
  	
  }
		
  ngOnInit() {
  	this.product = this.productService.getProduct();
  }

}

product.service.ts

import { Injectable } from '@angular/core';
import { LoggerService } from './logger.service'
@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private 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) {
  		
  	}
}

anotherproduct.service.ts

import { Injectable } from '@angular/core';
import {Product, ProductService } from './product.service';
import { LoggerService } from './logger.service'
@Injectable({
  providedIn: 'root'
})
export class AnotherProductService {
	
	getProduct(): Product {
    return new Product(1, 'sumsung', 3899, '最新款三星手机');
  }
  constructor(logger:LoggerService) { }
}

logger.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class LoggerService {

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

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { Product1Component } from './product1/product1.component';
import {ProductService } from './share/product.service';
import { LoggerService } from './share/logger.service'
import { Product2Component } from './product2/product2.component';
@NgModule({
  declarations: [
    AppComponent,
    Product1Component,
    Product2Component
  ],
  imports: [
    BrowserModule
  ],
  providers: [ProductService,LoggerService],
  bootstrap: [AppComponent]
})
export class AppModule { }

得到的页面

二.使用工厂和值提供器

把product2.component.ts中的provider属性去掉

import { Component, OnInit } from '@angular/core';
import {Product, ProductService } from '../share/product.service';
import {AnotherProductService } from '../share/anotherproduct.service';
@Component({
  selector: 'app-product2',
  templateUrl: './product2.component.html',
  styleUrls: ['./product2.component.css'],
})
export class Product2Component implements OnInit {

  product: Product;
  constructor(private productService:ProductService) {
  	
  }
		
  ngOnInit() {
  	this.product = this.productService.getProduct();
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { Product1Component } from './product1/product1.component';
import {ProductService, Product } from './share/product.service';
import { LoggerService } from './share/logger.service';
import { AnotherProductService } from './share/anotherproduct.service';
import { Product2Component } from './product2/product2.component';
@NgModule({
  declarations: [
    AppComponent,
    Product1Component,
    Product2Component
  ],
  imports: [
    BrowserModule
  ],
 providers: [{
    provide: ProductService,
    useFactory: (logger:LoggerService) => {
      const dev = Math.random() > 0.5;
      if (dev) {
        return new ProductService(logger);
      } else {
        return new AnotherProductService(logger);
      }
    },
    deps:[LoggerService]
  },LoggerService],
  bootstrap: [AppComponent]
})
export class AppModule { }

结果：上下两个组件的内容完全相同。工厂模式返回的是单一实例，共享同一个实例。

值提供器：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { Product1Component } from './product1/product1.component';
import {ProductService, Product } from './share/product.service';
import { LoggerService } from './share/logger.service';
import { AnotherProductService } from './share/anotherproduct.service';
import { Product2Component } from './product2/product2.component';
@NgModule({
  declarations: [
    AppComponent,
    Product1Component,
    Product2Component
  ],
  imports: [
    BrowserModule
  ],
 providers: [{
    provide: ProductService,
    useFactory: (logger:LoggerService,appConfig) => {
      const dev = Math.random() > 0.5;
      if (appConfig.isDev) {
        return new ProductService(logger);
      } else {
        return new AnotherProductService(logger);
      }
    },
    deps:[LoggerService,"APP_CONFIG"]
  },LoggerService,
	 {
	    provide:"APP_CONFIG",
	    useValue:{isDev:false}
	  }],
  bootstrap: [AppComponent]
})
export class AppModule { }