文件目录：

product1.component.html：

商品详情
名称：{{product.title}}
价格：{{product.price}}
描述：{{product.desc}}

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

商品详情
名称：{{product.title}}
价格：{{product.price}}
描述：{{product.desc}}

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();}}

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 { }

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！