각도 종속성 주입

목표: 이 기사에서는 종속성 주입 개념, Angular의 사용자 지정 종속성 주입을 알게 됩니다.

전제 조건 이 문서를 완료하기 전에 Visual Studio Code, NPM(노드 패키지 관리자), Node, Angular CLI를 포함한 모든 전제 조건 도구를 이미 설치해야 합니다.

의존성 주입

데이터베이스 액세스, 보기에서 이미지 렌더링 등과 같은 일반적인 작업을 수행하는 이러한 모든 구성 요소를 고려하십시오.

코드 재작성 방지를 위해 Angular Service 사용 가능

이러한 서비스는 해당 서비스가 필요한 구성 요소에 삽입될 수 있습니다

.

종속성 주입 또는 DI는 코드를 유연하고 테스트 및 변경 가능하게 유지합니다

.

클래스는 생성 방법을 몰라도 외부 로직을 상속할 수 있음

DI는 혜택 지침, 파이프 및 구성 요소

일반적으로 좋은 사용자 경험을 보장하기 위해 구성 요소가 사용됩니다.

작업을 수행하기 위해서는 서비스를 이용하는 것이 이상적입니다.

구성 요소는 서버에서 데이터 가져오기, 사용자 입력 확인 또는 콘솔에 직접 로그인하는 것과 같은 작업을 서비스에 위임할 수 있습니다.

사용 사례

직원 목록을 표시하는 작업을 수행하는 서비스 생성

종속성 주입을 사용하여 클래스에 서비스를 주입합니다

.

처음에 구성 요소 생성ng g c emp_info
다음으로 서비스 생성ng g s records
레코드.서비스.ts

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

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

  info1: string[] = ["John Doe", "E234", "[email protected]"]
  info2: string[] = ["Simon Gomez", "E321", "[email protected]"]
  info3: string[] = ["Bipon Biswas", "E123", "[email protected]"]

  getInfo1(): string[]{
    return this.info1;
  }
  getInfo2(): string[]{
    return this.info2;
  }
  getInfo3(): string[]{
    return this.info3;
  }

  constructor() { }
}

구성 요소 .ts 파일 emp-info.component.ts로 돌아가 보겠습니다.

import { Component, OnInit } from '@angular/core';
import { RecordsService } from '../records.service';

@Component({
  selector: 'app-emp-info',
  templateUrl: './emp-info.component.html',
  styleUrls: ['./emp-info.component.css'],
  providers: [RecordsService]
})
export class EmpInfoComponent implements OnInit {

  infoReceived1: string[] = [];
  infoReceived2: string[] = [];
  infoReceived3: string[] = [];

  constructor(private rservice: RecordsService) { }

  ngOnInit(): void {
  }

  getInfoFromServiceClass1(){
    this.infoReceived1 = this.rservice.getInfo1();
  }
  getInfoFromServiceClass2(){
    this.infoReceived2 = this.rservice.getInfo2();
  }
  getInfoFromServiceClass3(){
    this.infoReceived3 = this.rservice.getInfo3();
  }

}

서비스는 의존성 주입의 도움으로 구현됩니다.

우리가 해야 할 일. 먼저 서비스를 emp-info.component.ts 파일로 가져옵니다.

수입 서비스

import { RecordsService } from '../records.service';

emp-info.component.html

<button type="button" name="button" (click)="getInfoFromServiceClass1()">Employee1</button>
<ul>
    <li *ngFor="let info of infoReceived1" class="list-group-item">{{info}}</li>
</ul>

<button type="button" name="button" (click)="getInfoFromServiceClass2()">Employee2</button>
<ul>
    <li *ngFor="let info of infoReceived2" class="list-group-item">{{info}}</li>
</ul>

<button type="button" name="button" (click)="getInfoFromServiceClass3()">Employee3</button>
<ul>
    <li *ngFor="let info of infoReceived3" class="list-group-item">{{info}}</li>
</ul>

직원마다 다른 세 가지 버튼을 만듭니다. 그리고 사용자는 데이터가 UI에 표시되는 버튼을 클릭합니다.

app.component.html로 가져오기

<app-emp-info></app-emp-info>