angular 第二种依赖注入

import { Injectable } from '@angular/core';
import { ProductServiceService, Product } from './product-service.service';

@Injectable()
export class AnotherProductServiceService implements ProductServiceService {

  getProduct(): Product {
    return new Product(2, "sunsung7");
  }
  constructor() { }

}

import { Component, OnInit } from '@angular/core';
import { Product, ProductServiceService } from '../shared/product-service.service';
import { AnotherProductServiceService } from '../shared/another-product-service.service';

@Component({
  selector: 'app-product2',
  templateUrl: './product2.component.html',
  styleUrls: ['./product2.component.css'],
  providers: [{
    provide:ProductServiceService,useClass:AnotherProductServiceService
  }]
})
export class Product2Component implements OnInit {

  product: Product;

  constructor(private productService: ProductServiceService) { }

  ngOnInit() {
    this.product = this.productService.getProduct();
  }

}

<p>
    商品Id:{{product.id}}
  </p>
  <p>
      商品描述:{{product.title}}
    </p>
    
  

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


import { AppComponent } from './app.component';
import { Product1Component } from './product1/product1.component';
import { ProductServiceService } from './shared/product-service.service';
import { Product2Component } from './product2/product2.component';


@NgModule({
  declarations: [
    AppComponent,
    Product1Component,
    Product2Component
  ],
  imports: [
    BrowserModule
  ],
  providers: [ProductServiceService],
  bootstrap: [AppComponent]
})
export class AppModule { }