はじめに
今回からテキストボックスに文字列を入力すると、データを検索できる仕組みを作っていく。
一覧ページと詳細ページともに、RecipeServiceを経由してデータを取得できるようにする。
データを管理するサービスを導入する
今回はデータを管理するオブジェクトを導入する。このオブジェクトはコンポーネントからの指示でデータを取り出したり、格納したりする操作をする。このよのうなオブジェクトをAngularでは「サービス」という。サービスを導入するメリットは、様々なメソッドを介してデータの絞り込みや加工ができるようになる。
データを操作するサービスをを作る
ここで「recipe」という名前のサービスを作る。
コマンドで下記のように入力する。
ng g s recipe –module–app
app.module.ts
下記を追加する
mport {BrowserModule }from‘@angular/platform-browser’;
import {NgModule }from‘@angular/core’;
import {AppRoutingModule }from‘./app-routing.module’;
import {AppComponent }from‘./app.component’;
import {RecipeListComponent }from‘./recipe-list/recipe-list.component’;
import {RecipeDataComponent }from‘./recipe-data/recipe-data.component’;
import { RecipeService } from ‘./recipe.service’;
@NgModule({
declarations: [
AppComponent,
RecipeListComponent,
RecipeDataComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [RecipeService],
bootstrap: [AppComponent]
})
export classAppModule { }
サービスにデータを返す機能を実装する
レシピデータを返す機能を実装する。ここでは、recipe.service.tsに2つのメソッドを追加する。
①全データを返す
レシピの全データを返すもの。getRecipedataという名前にする。
②指定したidのデータを返す。
odが指定された時、そのidのデータを返すもの。getRecipeというメソッド名にする。
import {Injectable }from‘@angular/core’;
import { Recipe } from ‘./recipe/recipe’;
import { RECIPEDATA } from ‘./recipe/recipedata’;
@Injectable({
providedIn: ‘root’
})
export classRecipeService {
recipedata:Recipe[]=RECIPEDATA;
constructor() { }
getRecipedata():Recipe[]{
return this.recipedata;
}
getRecipe(id:string):Recipe{
return this.recipedata.find(Recipe=>this.recipedata.indexOf.toString()==id);
}
}
まずは、レシピのモデルを定義しているクラスとレシピとデータの配列を定義しているファイルをインポートする。
import {Recipe }from‘./recipe/recipe’;
import {RECIPEDATA }from‘./recipe/recipedata’;
自身のプロパティとして、このデータを定義する。ここではrecipedataというプロパティ（変数）名とする。
recipedata:Recipe[]=RECIPEDATA;
次にメソッド定義する。まずは、全データを消すメソッドを定義する。これはいま定義したrecipedataの内容を返すようにするだけである。
getRecipe(id:string):Recipe{
return this.recipedata.find(Recipe=>this.recipedata.indexOf.toString()==id);
コンポーネントを修正する
サービスが出来上がったので、一覧表示するコンポーネントと詳細表示するコンポーネントをこのサービスを使えるように修正する。
一覧表示するコンポーネントの修正
recipe-list.component.ts
import {Component,OnInit }from‘@angular/core’;
import { RecipeService } from ‘../recipe.service’;
import { Recipe } from ‘../recipe/recipe’;
@Component({
selector: ‘app-recipe-list’,
templateUrl: ‘./recipe-list.component.html’,
styleUrls: [‘./recipe-list.component.css’]
})
export classRecipeListComponentimplementsOnInit {
recipedata:Recipe[];
constructor(private rsv: RecipeService) { }
ngOnInit() {
this.recipedata = this.rsv.getRecipedata();
}
}
まずはいま作成したRecipeサービスやデータモデルをインポートする。
import {RecipeService }from‘../recipe.service’;
import {Recipe }from‘../recipe/recipe’;
サービスを使うため、このクラスに注入する。ここでは、rsvという名前で注入した。
すなわち、「this.rsv_でサービスのオブジェクトであるRecipeServiceオブジェクトを利用できるようになる。
constructor(privatersv:RecipeService) { }
そして全データを、このRecipeServiceオブジェクトから取得する。そのため、変数を用意する。recipedata:Recipe[];
そして変数に、RecipeServiceオブジェクトから読み込んだデータを設定する。
this.recipedata =this.rsv.getRecipedata();
これでテンプレート側からrecipedataプロパティを参照することで、全レシピデータを取得できる。
すでにrecipedataプロパティから参照するよう作っているので、テンプレート側を修正する必要はなく、テンプレート側はそのまま使える。
詳細表示するコンポーネントの修正
同様にして、詳細表示するコンポーネントにも修正を加える。
recipe-data.component.ts
import {Component,OnInit }from‘@angular/core’;
import {ActivatedRoute }from‘@angular/router’;
import {Location }from‘@angular/common’;
import {Recipe }from‘../recipe/recipe’;
import { RecipeService } from ‘../recipe.service’;
@Component({
selector: ‘app-recipe-data’,
templateUrl: ‘./recipe-data.component.html’,
styleUrls: [‘./recipe-data.component.css’]
})
export classRecipeDataComponentimplementsOnInit {
recipeid:string;
recipe:Recipe;
constructor(privateroute:ActivatedRoute,privatelocation:Location,private rsv: RecipeService) { }
ngOnInit() {
this.recipeid=this.route.snapshot.paramMap.get(‘id’);
this.recipe = this.rsv.getRecipe(this.recipeid);
}
backToList() {
this.location.back();
}
}
このプログラムの修正は、RECIPEDATA変数を直接読み込むのではなくて。RecipeServiceオブジェクトからデータを取得するようにしただけです。まずはRecipeServiceをインポートする。
import {RecipeService }from‘../recipe.service’;
このオブジェクトを利用できるようにする
constructor(privateroute:ActivatedRoute,privatelocation:Location,privatersv:RecipeService) { }
RecipeServiceに実装したgetRecipedataメソッドを呼び出すように修正する。
this.recipe =this.rsv.getRecipe(this.recipeid);
終わりに
一覧ページと詳細ページともに、RecipeServiceを経由してデータを取得できるようになった。
次回はレシピデータを増やし、レシピの項目を増やす。
コメント