Angular でサービスを追加してみました。

またサービスとやら難しいものを追加してしまいました。どうしてサービスって言うのでしょうか。無料だからでしょうか。とにかくコンポーネント以外のところからデータを取ってくることができるということがわかりました。
画面のデザインと表示するデータは分けて考えた方がいいそうです。
あくまで画面のデザインはコンポーネントを使い、表示するデータはサービスを使うためのようです。

うーん。そうなんですねって感じで進めますね。

#### １．サービスを作成します。
##### １－１．新しい汎用サービスを作成するコマンドを実行します。
`ng generate service encyclopedia`
（アウトプット）
![1-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798951/734eab5b-9dc1-f5df-1ba7-7cb563e2fdbf.png)
#### ２．新しいサービスに静的データを追加します。
２－１．encyclopedia.service.ts にデータを追加します。
``` diff
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class EncyclopediaService {
+  encyclopediaList: Encyclopedia[] = [
+    {
+      id: 1,
+      name: 'Service Test Name 001'
+    },
+    {
+      id: 2,
+      name: 'Service Test Name 002'
+    }
+  ];

  constructor() { }
}
```
２－２．encyclopedia.service.ts にサービス関数を追加します。
``` diff
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class EncyclopediaService {
  encyclopediaList: Encyclopedia[] = [
    {
      id: 1,
      name: 'Service Test Name 001'
    },
    {
      id: 2,
      name: 'Service Test Name 002'
    }
  ];
+
+  getAllEncyclopedias(): Encyclopedia[] {
+    return this.encyclopediaList;
+  }
+
+  getEncyclopediaById(id: number): Encyclopedia | undefined {
+    return this.encyclopediaList.find(encyclopedia => + encyclopedia.id === id);
+  }

  constructor() { }
}
```
２－３．encyclopedia.service.ts にインターフェイスをインポートします。
``` diff
import { Injectable } from '@angular/core';
+ import { Encyclopedia } from './encyclopedia';

@Injectable({
  providedIn: 'root'
})
export class EncyclopediaService {
  encyclopediaList: Encyclopedia[] = [
    {
      id: 1,
      name: 'Service Test Name 001'
    },
    {
      id: 2,
      name: 'Service Test Name 002'
    }
  ];

  getAllEncyclopedias(): Encyclopedia[] {
    return this.encyclopediaList;
  }

  getEncyclopediaById(id: number): Encyclopedia | undefined {
    return this.encyclopediaList.find(encyclopedia => + encyclopedia.id === id);
  }

  constructor() { }
}
```
#### ３．新しいサービスからデータを取得します。
##### ３－１．app.component.ts にサービス関数をインポートします。
``` diff
- import { Component } from '@angular/core';
+ import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent } from './header/header.component';
import { MainComponent } from './main/main.component';
import { Encyclopedia } from './encyclopedia';
+ import { EncyclopediaService } from './encyclopedia.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, HeaderComponent, MainComponent, CommonModule],
  template: `
  <main>
    <app-header></app-header>
    <app-main
      *ngFor="let encyclopedia of encyclopediaList"
      [encyclopedia]="encyclopedia">
    </app-main>
  </main>
`
})
export class AppComponent {
-  encyclopediaList: Encyclopedia[] = [
-    {
-      id: 1,
-      name: 'Test Name 001'
-    },
-    {
-      id: 2,
-      name: 'Test Name 002'
-    }
-  ];
+  encyclopediaList: Encyclopedia[] = [];
+  encyclopediaService: EncyclopediaService = inject(EncyclopediaService);
+
+  constructor() {
+    this.encyclopediaList = this.encyclopediaService.getAllEncyclopedias();
+  }
```
（アウトプット）
![3-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798951/95dc63e2-14ca-fc70-90b8-aa239a15a188.png)

無事に思った通りになりました。