angular 基本依赖注入

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

@Injectable()
export class ProductServiceService {

constructor() { }

getProduct(): Product {
return new Product(1, "iPhone7");
}

}

export class Product {
constructor(
public id: number,
public title: string
) { }
}

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';

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

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

@Component({
selector: 'app-product1',
templateUrl: './product1.component.html',
styleUrls: ['./product1.component.css']
})
export class Product1Component implements OnInit {

product: Product;

constructor(private productService: ProductServiceService) { }

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

}

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