ng4.x 提供器

《product.service.ts》:

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

@Injectable()

export class ProductService {

constructor() { }

getProduct(): Product {

 return new Product(0,"ipad",3555,"商品介绍");

}

export class Product {

   constructor(

       public  id:number,

      public title:string,

      public price:number,

     public  desc:string

     ){}

}

}

《app.module.ts》：

import { ProductService } from "./services/product.service";

providers: [ProductService]

《product.component.ts》:

商品服务ProductService通过商品组件ProductComponent的构造函数contructor注入其内，然后使用服务的getProduct方法获得数据product

import { Component, OnInit } from '@angular/core';

import { Product } from '../services/product.service';

export class ProductComponent implement OnInit {

    product :Product;

    constructor ( private productService:ProductService){   }

    ngOnInit () {

        this.product = this.productService.getProduct();

   }

}

《product.component.html》:

<div>

  <h4> 名称：{{ product.title }}</h4>

 . ..

</div>

《app.component.html》：

<app-product></app-product>

提供器的作用域：

No 1：当一个提供器声明在模块中时，它是对当前组件及子组件可见的

《app.module.ts》：

import { ProductService } from "./services/product.service";

providers: [ProductService]

No 2：当一个提供器声明在组件中时，它是对所有组件可见的，都可注入它

《product1.component.ts》：

@Component({

  providers:[ { 

      provide: ProductService,

     useClass:AnotherProductService

   }]

})

No 3：当声明在组件中的提供器和声明在模块中的提供器具有相同的头部时，组件中的提供器

No 4：一般情况下优先将提供器声明在模块中

---

---

小结：

No 1：将所有的服务都统一加上：

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

@Injectable()   装饰器

No 2 ：@Component（...）装饰器等是@Injectable()  装饰器的子类