Angular에서 한 서비스를 다른 서비스에 주입하기

프로젝트 작업을 수행하려면 서비스의 기능을 확장하기 위해 한 서비스를 다른 서비스에 주입해야 할 수 있습니다. 새 데이터가 추가될 때 콘솔에 메시지를 출력하는 또 다른 서비스를 만들어 봅시다.

먼저 test/src/app 폴더에 log.service.ts 파일을 생성합니다. LogService 클래스를 export 하며, 콘솔에 메시지를 출력하기 위한 write 함수를 작성합니다:

log.service.tsimport { Injectable } from '@angular/core';

@Injectable()
export class LogService {
  write(message: string) {
    console.log(message);
  }
}

다음으로, DataService 서비스로 이동하여 새로운 서비스를 import, inject 및 사용합니다:

app/data.service.tsimport { Injectable } from '@angular/core';
import { LogService } from './log.service'; // import

@Injectable()
export class DataService {
  private data: string[] = ['a', 'b', 'c'];
  
  constructor(private logService: LogService) { // inject
    
  }
  
  getData(): string[] {
    this.logService.write('data received'); // 사용
    return this.data;
  }
  
  addData(name: string){
    this.data.push(name);
    this.logService.write('new elem added'); // 사용
  }
}

그러나 이것만으로는 부족합니다. 컴포넌트 클래스에서 직접 사용되지는 않지만, 새 서비스를 컴포넌트 클래스에도 추가해야 합니다:

app/app.component.tsimport { Component } from '@angular/core';
import {DataService} from './data.service';
import {LogService} from './log.service'; // import

@Component({
  ........
  providers: [DataService, LogService] // 추가
})