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

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

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

１．サービスを作成します。

１－１．新しい汎用サービスを作成するコマンドを実行します。

ng generate service encyclopedia
（アウトプット）

２．新しいサービスに静的データを追加します。

２－１．encyclopedia.service.ts にデータを追加します。

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 にサービス関数を追加します。

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 にインターフェイスをインポートします。

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 にサービス関数をインポートします。

- 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();
+  }

（アウトプット）

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