Angular 의존 주입

의존 주입: Dependency Injection 줄여서 DI
반전 제어: IOC라고 하는 Inversion of Control

var product = new Product();
createShipment(product);

var product = new MockProduct();
createShipment(product);

수동으로 객체를 인스턴스화합니다.

주입의 이점에 의존하다

@NgModule({
    providers: [ProductService]
    = providers: [{provide: ProductService, useClass: ProductService}]
    = providers: [{provide: ProductService, useClass: AnotherProductService}]// ProductComponent 。
})
export class AppModule {}

@Component({
    ... 
})
export class ProductComponent {
    product: Product;
    constructor(productService: ProductService) {// ProductService Token， provide 。
        this.product = productService.getProduct();
    }
}

의존 주입

주입기constructor(private productService: ProductService){}

공급기providers: [ProductService], providers: [{provide: ProductService, useClass: ProductService}] 공장 방법으로 실례providers: [{provide: ProductService, userFactory: () => {...}}]로 되돌아갈 수 있음

구성 요소와 서비스를 생성하고 각각 명령을 사용합니다: ng g component product1와 ng g service shared/product우선 상품 정보류를 정의하다

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

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

  constructor() {
  }
}

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

작성getProduct() 방법

getProduct(): Product {
    return new Product(0, 'Iphone7', 5999, ' ');
}

그리고 모듈의 성명을 수정하고app.module.ts, 추가ProductService

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

수정Product1Component 및 주입ProductService

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();
  }

}

페이지 템플릿 내용을 수정하고 얻은 product 내용을 보여 줍니다.

  
상품 상세 정보
  
이름: {product.title}
  
가격: {{product.price}}
  
설명: {{product.desc}

공급자 역할 영역

공급자는 모듈에 설명할 수도 있고 구성 요소에 설명할 수도 있습니다.우리는 두 번째 구성 요소와 다른 서비스를 만들고 있습니다. 각각 명령을 사용합니다. ng g component product2 와 ng g service shared/anotherProductDell은 AnotherProductService 구현 ProductService 및 구현 방법 사용

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

@Injectable({
  providedIn: 'root'
})
export class AnotherProductService implements ProductService{

  constructor() { }

  getProduct(): Product {
    return new Product(0, 'Iphone9', 6999, ' ');
  }
}

그리고 수정product2.component.ts하고 코드product1.component.ts를 직접 복제하면 됩니다. 다른 부분은 구성 요소의 단계에서 사용합니다providers

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();
  }

}

페이지 템플릿 내용을 수정하고 얻은 product 내용을 보여줍니다. 사실은 product1 구성 요소의 페이지 템플릿과 같습니다.

  
상품 상세 정보
  
이름: {product.title}
  
가격: {{product.price}}
  
설명: {{product.desc}

이렇게product1는 주입된 정보를 얻고ProductService는 주입된 정보를 얻는다product2는 주입된 정보를 얻는다.
요약:

모듈에 공급자가 표시되면 모든 구성 요소에 표시되며 모든 구성 요소는 사용할 수 있습니다.

공급자가 구성 요소에 성명하면 구성 요소와 하위 구성 요소만 볼 수 있고 다른 구성 요소는 주입할 수 없습니다.

모듈의 공급자와 모듈의 공급자가 이름이 바뀔 때, 모듈에 성명된 공급자는 모듈에 성명된 공급자를 덮어씁니다. 이때 사용하는 것은 모듈에 성명된 공급자입니다.

일반적으로 서버 공급자를 모듈에 선언합니다.

AnotherProductService는 그 구조 함수에 다른 서비스를 주입할 수 있는지 여부를 결정한다.@Injectable()로 성명된 서비스만 다른 서비스에 주입할 수 있다.

서비스 간에 상호 주입

새로운 서비스 우선 생성@Injectable()이 서비스는 로그를 콘솔에 출력하는 것이 비교적 간단하다.

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

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

  constructor() {
  }

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

ng g service shared/logger를 LoggerService에 주입하다.ProductService

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, 'Iphone7', 5999, ' ');
  }
}

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

주입 product.service.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 { }

왜 부품이 LoggerService 장식기가 없어도 서비스에 주입할 수 있습니까?사실@Injectable()은 그의 자류다.

플랜트 및 값 선언 공급자 사용

템플릿 공급자의 설명 수정

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: () => {
      let logger = new LoggerService();
      let dev = Math.random() > 0.5;
      if (dev) {
        return new ProductService(logger);
      } else {
        return new AnotherProductService(logger);
      }
    }
  }, LoggerService],
  bootstrap: [AppComponent]
})
export class AppModule {
}

그러나 이때@Component는 ProductService에 의존하여 약간의 조정을 한다

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) => {
      let 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) => {
      let dev = Math.random() > 0.5;
      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) => {
      let dev = Math.random() > 0.5;
      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 {
}

주입기의 등급 관계

Application Level 주입기 = > 마스터 어셈블리 주입기 = > 서브어셈블리 주입기LoggerService
구조 함수의 매개 변수에 따라 주입된다.
수동 주입 방식은 실제 과정에서 이런 문법 사용을 피해야 한다.

import {Component, Injector, 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;

  private productService: ProductService;

  constructor(private injector: Injector) {
    this.productService = injector.get(ProductService);
  }

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

}