서비스

서비스는 데이터를 검색하고 구성 요소에 제공하는 부분입니다.

서비스 만들기

터미널

$ cd src/app
$ ng generate service hero

hero.service.ts 및 hero.service.spec.ts가 생성됩니다.hero.service.ts에서 데이터를 처리합니다.

데이터 검색

자동으로 생성된 코드에 약간 추가합니다.

hero.service.ts

import { Injectable } from '@angular/core';
//以下2行でヒーロー情報の型とデータをインポート
import {Hero} from './hero';
import {HEROES} from './mock-heroes';

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

  constructor() { }

  getHeroes(): Hero[]{ //ヒーローのデータを返す関数を定義
    return HEROES;
  }
}

hero 컴포넌트 수정

hero 컴포넌트에서 데이터를 가져오고 있었습니다만, 서비스로부터 제공해 주므로 컴퍼넌트에서는 데이터 대신에 서비스를 임포트합니다.

hero.component.ts

import { Component, OnInit } from '@angular/core';
import {Hero} from '../hero';
import {HeroService} from '../hero.service';//サービスをインポート

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  heroes: Hero[];//宣言を変更
  selectedHero: Hero;

  //サービスをインポートしたらコンストラクタで宣言する
  constructor(private heroService: HeroService) { }

  ngOnInit() {//ここで関数を呼び出す
    this.getHeroes();//下で作る関数を呼び出す
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

  getHeroes(): void{//取得したデータを代入する関数を定義
    this.heroes = this.heroService.getHeroes();
  }
}

여러가지 변경하고 있습니다만, 서비스로부터 데이터를 취득해 컴퍼넌트에서 사용할 수 있도록(듯이) 하고 있습니다.

Observable 사용

이대로 서버에서 데이터를 검색할 때 작동하지 않습니다.
이런 경우에도 작동하도록 ts 파일을 변경합니다. (비동기 기술)

hero.service.ts

import { Injectable } from '@angular/core';
import {Hero} from './hero';
import {HEROES} from './mock-heroes';
import {Observable, of} from 'rxjs'//ここを追加

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

  constructor() { }

  getHeroes(): Observable<Hero[]>{//ここを変更
    return of(HEROES);
  }
}

함수의 반환 값과 형식을 변경했습니다. 이렇게하면 서버에서 데이터를 검색하는 데 시간이 걸릴 때까지 기다립니다. 여기에서 형식을 변경했으므로 hero.component.ts도 변경해야 합니다.

hero.component.ts

  getHeroes(): void{//変更した関数
    this.heroService.getHeroes().subscribe(
      heroes => this.heroes = heroes
    );
  }

이제 솔직히 모르겠네요. 지금은 어리석은 정도로 좋다고 생각합니다. 이제 지금까지 그대로 작동합니다.

메시지 표시

데이터를 얻을 수 있을 때 메시지를 출력하도록 합니다.

이번 메세지를 출력시키는 message 컴퍼넌트에 가세해, 「데이터 취득과의 첨부·메시지를 기억・컴퍼넌트에 건네준다」의 역할을 하는 message 서비스의 2개를 작성합니다.

터미널

$ cd src/app
$ ng generate component message
$ ng generate service message

다음으로 출력할 위치를 html로 하단으로 설정합니다.

app.component.html

<h1>{{title}}</h1>
<app-heroes></app-heroes>
<app-message></app-message>

서비스에서 메시지를 추가하고 지우는 함수를 정의합니다.

message.service.ts

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

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

  messages: string[] = [];//メッセージを代入する変数を定義

  constructor() { }

  add(message:string){//引数のmessageをmessagesにpushで代入
    this.messages.push(message);
  }

  clear(){//messagesの中身を空にする
    this.messages = [];
  }
}

여기에서 만든 함수를 hero.service.ts에서 사용합니다.

hero.service.ts

import { Injectable } from '@angular/core';
import {Hero} from './hero';
import {HEROES} from './mock-heroes';
import {Observable, of} from 'rxjs';
import {MessageService} from './message.service';//サービスをインポート

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

  //サービスをインポートしたのでコンストラクタでサービスを宣言
  constructor(private messageService: MessageService) { }

  getHeroes(): Observable<Hero[]>{
    //データを取得したらメッセージを代入
    this.messageService.add('HeroService: fetched heroes');
    return of(HEROES);
  }
}

여기에 대입된 messages 를 message 컴퍼넌트에 건네줍니다.

message.component.ts

import { Component, OnInit } from '@angular/core';
import { MessageService } from '../message.service';//サービスをインポート

@Component({
  selector: 'app-message',
  templateUrl: './message.component.html',
  styleUrls: ['./message.component.css']
})
export class MessageComponent implements OnInit {

  //サービスをインポートしたのでコンストラクタでサービスを宣言
  constructor(public messageService: MessageService) { }

  ngOnInit() {
  }

}

이번에는 계약자에서 서비스 선언을 public 로 했으므로, message 컴퍼넌트내에서 서비스를 사용할 수 있습니다. 그것을 이용하여 HTML을 작성합니다.

message.component.html

<div *ngIf="messageService.messages.length">

    <h2>Messages</h2>
    <button class="clear"
            (click)="messageService.clear()">clear</button>
    <div *ngFor='let message of messageService.messages'> {{message}} </div>

</div>

이렇게 메시지가 출력됩니다.