Angular에서 서비스 사용하기

이전 강의에서 우리는 DataService라는 커스텀 서비스를 생성했습니다. 이제 컴포넌트로 가져와 보겠습니다:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // 여기

@Component 데코레이터의 providers 속성에 우리의 서비스를 지정해야 합니다:

@Component({
	.....
	providers: [ DataService ] // 여기
})

이제 의존성 주입(dependency injection)이라는 특별한 접근 방식을 사용하겠습니다. 그 본질은 컴포넌트 생성자에 서비스를 매개변수로 전달하면 자동으로 컴포넌트의 비공개 속성으로 들어간다는 것입니다. 코드에서 확인하세요:

export class AppComponent {
	constructor(private dataService: DataService) { // 의존성 주입
		console.log(this.dataService); // 서비스가 비공개 속성에 있음
	}
}

서비스에 대한 의존성 주입이 작동하는 이유는 이전에 Injectable 데코레이터를 적용했기 때문입니다.

이제 컴포넌트 클래스의 생성자에서 해당 메서드를 호출하여 서비스에서 데이터를 가져오겠습니다:

export class AppComponent {
	public data: string[] = [];
	
	constructor(private dataService: DataService) {
		this.data = this.dataService.getData();
	}
}

가져온 데이터를 컴포넌트 템플릿에 출력해 보겠습니다:

<ol>
	<li *ngFor="elem of data">
		{{ elem }}
	</li>
</ol>

컴포넌트에서 서비스로부터 상품을 가져와 컴포넌트 템플릿에 출력하세요.

서비스에 새 상품을 추가하는 메서드를 만드세요. 컴포넌트에서 버튼을 만들고, 클릭하면 새 상품이 추가되도록 하세요.

두 개의 입력 필드와 버튼이 있는 폼을 만드세요. 버튼을 누르면 새 상품이 추가되어야 합니다.