Angular4学习笔记(四)

（一）依赖注入（用依赖注入实现以下的界面）

1. 创建一个product1组件和一个product服务。

2.先写product服务

product.service.ts

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

@Injectable()
export class ProductService {

  constructor() { }

  //定义一个返回值为Product的方法（这里没有连接数据库，直接实例化）
  getProduct() : Product {
    return new Product(1,"java从入门到放弃" , 122.5,"它是一本很好的书！");
  }
}
/**
 * 定义一个用来封装商品信息的Product类
 */
export class Product{
  constructor(
    public id:number,
    public name:string,
    public price:number,
    public desc:string
  ){

  }
}

3.注册服务

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 './service/product.service';

@NgModule({
  declarations: [
    AppComponent,
    Product1Component
  ],
  imports: [
    BrowserModule
  ],
  //注入productService
  providers: [ProductService],
  bootstrap: [AppComponent]
})
export class AppModule { }

4.声明属性来接收商品信息

product1.component.ts

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

@Component({
  selector: 'app-product1',
  templateUrl: './product1.component.html',
  styleUrls: ['./product1.component.css']
})
export class Product1Component implements OnInit {
  
  //声明Product类型的属性product用来接收服务传过来的商品详情
  public product:Product;
  constructor(private productService:ProductService) { }

  ngOnInit() {
    //调用Product服务里的getProduct()方法获取商品详情
    this.product=this.productService.getProduct();
  }

}

5.页面上展示

product1.component.html

<div>
  <h3>商品详情</h3>
  商品ID：{{product.id}}  <br>
  商品名称：{{product.name}} <br>
  商品价格：{{product.price}} <br>
  商品描述：{{product.desc}}
</div>

6.在app引入product1组件

app.commponent.html

<app-product1></app-product1>

注：providers也可以声明在组件里

@Component({
  selector: 'app-product2',
  templateUrl: './product2.component.html',
  styleUrls: ['./product2.component.css'],
  //provider在组件里声明
  providers:[{
      provide:ProductService , useClass:AnotherProductService
  }]
})

********************************************************

provider（提供器）作用域规则：

(1)当provider声明在模块（app.module.ts）里，所有的组件都可以用它
(2)当provider声明在组件（compontent.ts）里，只对该组件和该组件的子组件使用

(3)当在模块里和组件里同时声明一个时，组件里的起作用

(4)一般声明在模块中

服务之间相互注入（前提：只有有@Injectable注解的服务才可以注入其他服务）

@Injectable()  //代表这个服务可以注入其他的服务
export class ProductService {

  constructor(private loginService:LoggerService) { }

  //定义一个返回值为Product的方法（这里没有连接数据库，直接实例化）
  getProduct() : Product {
    this.loginService.loggerMessage("我是用来测试服务之间相互注入的！");
    return new Product(1,"java从入门到放弃" , 122.5,"它是一本很好的书！");
  }
}

使用工厂和值声明提供器：

providers: [{
    provide:ProductService,
    //这里定义工厂，工厂方法是单例方法，只有创建第一个对象时被调用，结果：返回两个商品信息是一样的，
    useFactory:(logger:LoggerService,dev)=>{
      //在工厂方法里用new实例化了一个对象，这里不推荐使用，应该在useFactory参数里直接传进来logger
      // let logger = new LoggerService();  
      //这里是用随机数判断该注入那个服务的，真实项目中一般不这样使用需要判读
      // let dev =Math.random()>0.5;
      if(dev){
        return new ProductService(logger);
      }else{
        return new AnotherProductService(logger);
      }
    },
    //desp：指声明要在工厂里注入的服务
    deps:[LoggerService,'IS_DEV_EVN']
  },{
    //这里定义的provided就是确定要注入哪个服务的
    provide:"IS_DEV_EVN",useValue:false,
  },LoggerService],
  bootstrap: [AppComponent]providers: [{
  
})

****************************************************

Angular4里面只有一种注入：构造器注入。

注入器的层级关系：

Angular4学习笔记(四)

猜你喜欢