ANGULARのリスト一覧と詳細表示を切り分けて、保守性を高くする

前回に引き続き、Angularのアプリケーションの作成を進めていきます。
現在のAngularでは、リストの表示と詳細の表示を1つのファイルにまとめて書いています。

保守性の高いプログラムにするために、詳細の表示を移します。
StockDetailComponentを作成しましょう。

ターミナルでAngularのgenerateコマンドを打ち、新しいコンポーネントを作成しましょう。

user@computer$ ng generate component stock-detail



Angularのtemplate を記述する

Angularのstock-detail.component.htmlに記述します。

Angular

<div *ngIf=”stock”>
<h2>{{Stock.name | uppercase}} Details</h2>
<div><span>id: </span>{{stock.id}}</div>
<div>
<label>name:
<input [(ngModel)]=”Stock.name” placeholder=”name”>
</label>
</div>
</div>

 

stock-detail.component.tsファイルの修正

Angularのstock-detail.component.tsファイルを次のように記述します。

import { Component, OnInit, Input } from '@angular/core';
import { Stock } from '../stock';

@Component({
selector: 'app-stock-detail',
templateUrl: './stock-detail.component.html',
styleUrls: ['./stock-detail.component.css']
})
export class StockDetailComponent implements OnInit {
@Input() stock: Stock;

constructor() { }

ngOnInit() {
}

}

 

StocksComponentテンプレートを更新する

StocksDetailComponentのセレクターは ‘app-stock-detail’です。
Angularのstocks.component.htmlファイルを次のように記述しましょう。

<h2>My Stocks</h2>
<ul class=”stocks”>
<li *ngFor=”let stock of stocks”
[class.selected]=”stock === selectedStock”
(click)=”onSelect(stock)”>
<span class=”badge”>{{stock.id}}</span> {{stock.name}}
</li>
</ul>
<app-stock-detail [stock]=”selectedStock”></app-stock-detail>

 

機能が変更されました。

StockDetailComponentが StocksComponentの代わりに詳細を表示するようになりました。

Angular

 

ここまでで、次を行いました。

Angularのgenerateコマンドで、stock-detailコンポーネントを作成しました。

stock-detail.component.htmlを作成しました。

stock-detail.component.tsにInoutと@Input( )stock: Stock;を記述しました。

<app^stock-detail[stock]=“selectedStock”></app-stock-detail>を追加しました。


返信を残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください