Angular中依赖注入

其他 2019-01-04 08:51:00 阅读次数: 0

依赖注入：
DI，Dependency injection
控制反转：
IOC，Inversion of Control
好处：松耦合
注入器：
constructor(private productService:ProductService){}
提供器：
providers：[PrpductService]
providers：[{provide:ProductService,useClass:ProductService}]
providers：[{provide:ProductService,useFactory:() =>{}}]

项目

1.1创建项目
–> ng new di
1.2生成组件
–> ng g component product1
1.3生成服务
–> ng g service shared/product

提供器声明在模块中

product.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  constructor() { }
  getProduct(): Product {
    return new Product(0, 'iphobeX', 10000, '最新款苹果手机');
  }
}
export class Product {
  constructor(
    public id: number,
    public title: string,
    public price: number,
    public desc: string
  ) {
  }
}

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

@NgModule({
  declarations: [
    AppComponent,
    Product1Component
  ],
  imports: [
    BrowserModule
  ],
  /*使用提供器声明在模块里*/
  providers: [ProductService],
  bootstrap: [AppComponent]
})
export class AppModule { }

product1.component.ts

import { Component, OnInit } from '@angular/core';
import {Product, ProductService} from '../shared/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();
  }
}

product1.component.html

<div>
  <h1>商品详情</h1>
  <h2>名称：{{product.title}}</h2>
  <h2>价格：{{product.price}}</h2>
  <h2>描述：{{product.desc}}</h2>
</div>

app.component.html

<div>
  <div>
    <h1>基本的依赖注入样例</h1>
  </div>
  <div>
    <app-product1></app-product1>
  </div>
</div>

效果图
1.2生成组件
–> ng g component product2
1.3生成服务
–> ng g service shared/anotherProduct

提供器声明在组件中

another-product.service.ts

import { Injectable } from '@angular/core';
import {Product, ProductService} from './product.service';
import {LoggerService} from './logger.service';
@Injectable({
  providedIn: 'root'
})
/*实现ProductService*/
export class AnotherProductService implements ProductService {
  logger: LoggerService;
  getProduct(): Product {
    return new Product(1, 'sumsung', 4899, '最新款三星手机');
  }
  constructor() { }
}

product2.component.ts

import { Component, OnInit } from '@angular/core';
import {Product, ProductService} from '../shared/product.service';
import {AnotherProductService} from '../shared/another-product.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();
  }
}

product2.component.html

<div>
  <h1>商品详情</h1>
  <h2>名称：{{product.title}}</h2>
  <h2>价格：{{product.price}}</h2>
  <h2>描述：{{product.desc}}</h2>
</div>

app.component.html

<div>
  <div>
    <h1>基本的依赖注入样例</h1>
  </div>
  <div>
    <app-product1></app-product1>
    <app-product2></app-product2>
  </div>
</div>

效果图
规则：
1.当提供器声明在模块中时，所有组件可见
2.当提供器声明在组件中时，本组件、子组件可见
3.当声明在模块中的提供器和声明在组件中的提供器具有相同的token时，声明在组件中的提供器会覆盖声明在模块中提供器。
4.优先考虑在模块中声明提供器。

服务中注入服务

1.在模块中声明
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 './shared/product.service';
import { Product2Component } from './product2/product2.component';
import {LoggerService} from './shared/logger.service';

@NgModule({
  declarations: [
    AppComponent,
    Product1Component,
    Product2Component
  ],
  imports: [
    BrowserModule
  ],
  /*使用提供器声明在模块里*/
  providers: [ProductService, LoggerService],
  bootstrap: [AppComponent]
})
export class AppModule { }

2.loggerService 注入到productService
logger.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class LoggerService {

  constructor() { }
  log(message: string) {
    console.log(message);
  }
}

logger.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, 'iphobeX', 10000, '最新款苹果手机');
  }
}
export class Product {
  constructor(
    public id: number,
    public title: string,
    public price: number,
    public desc: string
  ) {
  }
}

效果图

用工厂方法和值声明提供器

product2.component.ts

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

@Component({
  selector: 'app-product2',
  templateUrl: './product2.component.html',
  styleUrls: ['./product2.component.css'],
  /*去掉组件声明提供器，和1共享module声明提供器*/
  /*providers: [{
    provide: ProductService, useClass: AnotherProductService
  }]*/
})
export class Product2Component implements OnInit {
  /*接收从服务中获取数据*/
  product: Product;
  /*依赖注入声明所需服务*/
  constructor(private productService: ProductService) { }

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

another-product.service.ts

import { Injectable } from '@angular/core';
import {Product, ProductService} from './product.service';
import {LoggerService} from './logger.service';

@Injectable({
  providedIn: 'root'
})
/*实现ProductService*/
export class AnotherProductService implements ProductService {
  logger: LoggerService;
  getProduct(): Product {
    return new Product(1, 'sumsung', 4899, '最新款三星手机');
  }
  constructor(public logger: LoggerService) { }
}

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 './shared/product.service';
import { Product2Component } from './product2/product2.component';
import {LoggerService} from './shared/logger.service';
import {AnotherProductService} from './shared/another-product.service';

@NgModule({
  declarations: [
    AppComponent,
    Product1Component,
    Product2Component
  ],
  imports: [
    BrowserModule
  ],
  /*使用提供器声明在模块里*/
  providers: [{
    provide: ProductService,
      useFactory: () => {
        const logger = new LoggerService();
        const dev = Math.random() > 0.5;
          if (dev) {
            return new ProductService(logger);
          } else {
            return new AnotherProductService(logger);
          }
      }
    }, 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} from './shared/product.service';
import { Product2Component } from './product2/product2.component';
import {LoggerService} from './shared/logger.service';
import {AnotherProductService} from './shared/another-product.service';

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

用一个具体的值来定义一个提供器

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 './shared/product.service';
import { Product2Component } from './product2/product2.component';
import {LoggerService} from './shared/logger.service';
import {AnotherProductService} from './shared/another-product.service';

@NgModule({
  declarations: [
    AppComponent,
    Product1Component,
    Product2Component
  ],
  imports: [
    BrowserModule
  ],
  /*使用提供器声明在模块里*/
  providers: [{
    provide: ProductService,
      useFactory: (logger: LoggerService, isDev) => {
          if (isDev) {
            return new ProductService(logger);
          } else {
            return new AnotherProductService(logger);
          }
      },
    deps: [LoggerService, 'IS_DEV_ENV']
    }, LoggerService,
    {
      provide: 'IS_DEV_ENV', useValue: false
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

用一个值对象来定义一个提供器

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 './shared/product.service';
import { Product2Component } from './product2/product2.component';
import {LoggerService} from './shared/logger.service';
import {AnotherProductService} from './shared/another-product.service';

@NgModule({
  declarations: [
    AppComponent,
    Product1Component,
    Product2Component
  ],
  imports: [
    BrowserModule
  ],
  /*使用提供器声明在模块里*/
  providers: [{
    provide: ProductService,
      useFactory: (logger: LoggerService, appConfig) => {
          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 { }

猜你喜欢

转载自blog.csdn.net/weixin_44174685/article/details/85232517
今日推荐
富文本编辑器 Quill 2.0 重磅发布，特性、可靠性与开发者体验大幅提升
“开源信徒”周鸿祎开源360智脑大模型
周排行
Ubuntu 14.04 下Fuel6.0安装部署
香港一小巴侧翻致1死16伤 警方：未见机件故障
pikachu--XSS盲打
阅读 深入理解JVM虚拟机笔记一
java.sql.SQLException: ORA-00932: 数据类型不一致: 应为 -, 但却获得 CLOB
oracle delete all object under an user
[LeetCode]20 Valid Parentheses 有效的括号
树形DP求树的直径 【模板】
Context propagation over HTTP in Go
【PAT】（B）1053 住房空置率 (20)*
每日归档
更多
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)
2024-04-13(119)
2024-04-12(38)
2024-04-11(14)
2024-04-10(68)
2024-04-09(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022