Angular 2 Beta、ヒーローズツアーチュートリアルパート2

パート1 パート2 パート3 パート4

もっとヒーローが必要

私たちの物語にはもっと多くのヒーローが必要です。 Heroes Tourアプリケーションを展開して、ユーザーがヒーローを選択し、彼に関する詳細情報を表示できるヒーローのリストを表示します。

アプリケーションを起動する、パート2

ヒーローのリストを表示するために必要なものについて考えてみましょう。 まず、表示するヒーローのリストを含む配列が必要です。 次に、配列からテンプレートにデータを渡す方法が必要です。

私たちが泊まった場所

2番目のヒーローツアーに進む前に、 最初のパートを完了する必要があります。 まだ行っていない場合は、戻ってください。

コード変換とアプリケーション実行をサポート

TypeScriptコンパイラを実行して、ファイルの変更を監視し、すぐにコンパイルし、Webサーバーも起動するようにします。 入力することでこれを行います

npm start 

これにより、ヒーローツアーの作成を継続している間、アプリケーションが実行され続けます。

ヒーローの展示

ヒーロー作成

app.component.tsの下部に10人のヒーローの配列を作成してみましょう。

app.component.ts（ヒーローの配列）

  let HEROES: Hero[] = [ { "id": 11, "name": "Mr. Nice" }, { "id": 12, "name": "Narco" }, { "id": 13, "name": "Bombasto" }, { "id": 14, "name": "Celeritas" }, { "id": 15, "name": "Magneta" }, { "id": 16, "name": "RubberMan" }, { "id": 17, "name": "Dynama" }, { "id": 18, "name": "Dr IQ" }, { "id": 19, "name": "Magma" }, { "id": 20, "name": "Tornado" } ]; 

HEROESは、最初のパートで作成したクラスであるHeroタイプの要素の配列です。 もちろん、このヒーローのリストをWebサービスから取得したいのですが、小さなステップを踏んで、最初にモックオブジェクト（以前に指定されたデータを返すスタブ）からヒーローを表示します。

ヒーローの表現

バインドするヒーローのソースとなるプロパティをAppComponent作成しましょう。

app.component.ts（プロパティ-ヒーローの配列）

  public heroes = HEROES; 

heroesのタイプを明示的に定義する必要はありません。 TypeScriptはHEROES変数から取得できます。

ここで、このコンポーネントクラスでヒーローのリストを定義できます。 しかし、最終的にはWebサービスからヒーローを取得することを知っています。 したがって、このデータをクラス実装からすぐに引き出すことは理にかなっています。

テンプレートにヒーローを表示する

コンポーネントにはheroesが含まれています。 テンプレートに順不同リストを作成して表示してみましょう。 ヒーローに関する詳細情報の上の見出しの下に、次のHTMLを挿入します。

app.component.ts（ヒーローテンプレート）

  <h2>My Heroes</h2> <ul class="heroes"> <li> <!-- each hero goes here --> </li> </ul> 

これで、ヒーローを入力できるテンプレートができました。

ngForでヒーローをリストする

コンポーネント内のヒーローの配列をテンプレートに関連付け、それを反復処理し、各ヒーローを個別に表示したいと思います。 これを行うには、Angularの助けが必要です。 ステップバイステップで始めましょう：
最初に、組み込み*ngForディレクティブを追加して<li>変更します。

app.component.ts（ngFor）

  <li *ngFor="#hero of heroes"> 

* ngFor`の) の先頭のアスタリスク（ ` ) は、構文の重要な部分です。**

ngForの*プレフィックスは、 <li>要素とその子がマスターテンプレートを構成することを示します。

ngForディレクティブはheroes配列を通過して、 AppComponent.heroesプロパティを返し、テンプレートに表示します。

ngForによって割り当てられた引用テキストは、「 heroes配列の各ヒーローを取得し、ローカル変数heroに保存し、対応するテンプレートインスタンスで使用できるようにする」ことを意味します。

hero前のプレフィックス#は、ヒーローをローカルテンプレート変数として識別します。 次に、テンプレートでこの変数を参照して、ヒーローのプロパティにアクセスできます。

ngForおよびローカルテンプレート変数の詳細については、 データマッピングおよびテンプレート構文の章をngForください。

ここで、 <li>タグの間にコードを挿入します。このコードは、 heroテンプレート変数を使用してheroのプロパティを表示します。

app.component.ts（ngForテンプレート）

  <li *ngFor="#hero of heroes"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> 

ブラウザがページを更新すると、ヒーローのリストが表示されます！

ヒーローにスタイルを追加する

ヒーローのリストはかなり退屈に見えます。 どのヒーローが選択され、カーソルが現在どのヒーローの上にあるかをユーザーが理解できるように、ユーザーに視覚的にわかりやすくしたいと思います。

コンポーネントにスタイルを追加しましょう。 次のCSSクラスを@Componentデコレーターのstylesプロパティに割り当てます。

app.component.ts（スタイルの追加）

  styles:[` .selected { background-color: #CFD8DC !important; color: white; } .heroes { margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em; } .heroes li { cursor: pointer; position: relative; left: 0; background-color: #EEE; margin: .5em; padding: .3em 0; height: 1.6em; border-radius: 4px; } .heroes li.selected:hover { background-color: #BBD8DC !important; color: white; } .heroes li:hover { color: #607D8B; background-color: #DDD; left: .1em; } .heroes .text { position: relative; top: -3px; } .heroes .badge { display: inline-block; font-size: small; color: white; padding: 0.8em 0.7em 0 0.7em; background-color: #607D8B; line-height: 1em; position: relative; left: -1px; top: -4px; height: 1.8em; margin-right: .8em; border-radius: 4px 0 0 4px; } `] 

長い文字列の複数行表現には、再び `-notationを使用することに注意してください。

コンポーネントにスタイルを割り当てると、スタイルはその特定のコンポーネントのスコープ内にのみ存在します。 したがって、スタイルはAppComponentのみ適用され、外部HTMLに「漏れる」ことはありません。

ヒーローを表示するためのテンプレートは次のようになります。

app.component.ts（ヒーローのスタイル）

  <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="#hero of heroes"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> 

たくさんのスタイル！ ここに示すように、それらをコンポーネントの説明に含めるか、別のファイルに移動して、コンポーネントコードを簡素化します。 これは次の章で行います。 とりあえず、そのままにしておきましょう。

ヒーローセレクション

このアプリケーションには、ヒーローのリストと1人のヒーローに関する情報があります。 ヒーローのリストと1人のヒーローは、まったく関係ありません。 ユーザーにリスト内のヒーローを選択してもらい、選択したヒーローに関する情報が詳細ビューに表示されるようにします。 このUIパターンは一般に「マスター/ディテール」として知られています（「マスター/スレーブ」と翻訳されますが、「マスター/ディテール」は将来使用される予定です）。 この場合、マスターはヒーローのリストであり、詳細は選択したヒーローの詳細な表現です。
リスト内のヒーローのクリックのイベントに関連付けられた「selectedHero」コンポーネントのプロパティを介して、マスターを詳細に接続しましょう。

クリックイベント（マウスクリック）

Angularイベントバインディングを使用してクリックイベント処理を挿入することにより、 <li>変更します。

app.component.ts（クリックイベントキャプチャ）

  <li *ngFor="#hero of heroes" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> 

イベントバインディングに焦点を当てる：

  (click)="onSelect(hero)" 

括弧は、クリックイベントのターゲットとして<li>要素を指定します。 等号の右側の式は、 AppComponentコンポーネントにあるonSelect()メソッドを呼び出し、 heroテンプレートのローカル変数を引数として渡します。 これは、以前にngFor定義したのと同じhero変数です。

イベントバインディングの詳細については、「 ユーザー入力」および「 テンプレート構文 」の章を参照してください。

クリックハンドラーを追加する

このイベントは、まだ存在しないonSelectメソッドに関連付けられています。 このメソッドをコンポーネントに追加します。 このメソッドは何をすべきですか？ コンポーネントの変数「selected hero」に、ユーザーがクリックしたヒーローを書き込む必要があります。

これまでのところ、コンポーネントにはそのような変数はないので、追加することから始めましょう。

選択したヒーローの任命

AppComponent heroプロパティは必要なくなりました。 selectedHeroプロパティに置き換えます。

app.component.ts（selectedHero）

  selectedHero: Hero; 

ユーザーが自分でヒーローを選択するまでヒーローは重要ではないと判断したため、ヒーローで行ったようにselectedHero初期化しません。

次に、ユーザーがクリックしhero selectedHeroプロパティに値hero書き込むonSelectメソッドを追加します。

app.component.ts（onSelect）

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

選択したヒーローの詳細情報をテンプレートに表示する必要があります。 現時点では、テンプレートはまだ古いheroプロパティにアクセスしています。 テンプレートを修正して、新しいselectedHeroプロパティにバインドします。

app.component.ts（selectedHeroにスナップ）

  <h2>{{selectedHero.name}} details!</h2> <div><label>id: </label>{{selectedHero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="selectedHero.name" placeholder="name"/> </div> 

ngIfで空のデータを非表示にする

アプリケーションをダウンロードすると、ヒーローのリストが表示されますが、ヒーローは選択されていません。 selectedHero定義さselectedHeroいません。つまり、 undefinedです。 これが、ブラウザコンソールに次のエラーメッセージが表示される理由です。

  EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null] 

覚えているように、テンプレートにはselectedHero.nameが表示selectedHero.nameれます。 プロパティを含むselectedHero変数が定義されていないため、 nameプロパティは存在しません。

ヒーローが選択されるまで、ヒーローに関する詳細情報をDOMから削除することにより、この問題を解決します。

ヒーローに関する詳細情報を含むHTMLを<div>ラップしました。 組み込みのngIfディレクティブを追加し、コンポーネントのselectedHeroプロパティをそれに設定します。

app.component.ts（ngIf）

  <div *ngIf="selectedHero"> <h2>{{selectedHero.name}} details!</h2> <div><label>id: </label>{{selectedHero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="selectedHero.name" placeholder="name"/> </div> </div> 

*「ngIf」の前の先頭のアスタリスク（ ）は構文の重要な部分であることを忘れないでください **

selectedHero変数が定義されるまで、 ngIfディレクティブは詳細なヒーロー情報を含むHTMLをDOMから削除します。 したがって、ヒーローに関する詳細な情報を持つ要素も、心配する価値のあるバインディングもありません。

ユーザーがリストからヒーローを選択すると、 selectedHero変数が値を取得して定義され、 ngIfがヒーローに関する詳細情報を含むデータをDOMに配置し、ネストされたバインディングを実装します。

ngIfと `ngFor 'は、「構造ディレクティブ」と呼ばれます。これは、DOMの一部の構造を変更できるためです。 つまり、AngularがDOMでコンテンツをレンダリングする方法の構造を定義します。

ngIf、ngFor、およびその他の構造化ディレクティブの詳細については、 構造ディレクティブとテンプレート構文の章を参照してください。

ブラウザが更新され、ヒーローのリストが表示されますが、選択したヒーローに関する詳細情報は表示されません。 NgIfは、 selectedHero変数が定義されるまで、DOMの外部に保存します。 リスト内のヒーローをクリックすると、選択したヒーローに関する詳細情報が表示されます。 すべてが期待どおりに機能します。

選択したアイテムのスタイル設定

リストの下に選択したヒーローに関する情報が表示されますが、上のリストではこのヒーローをすばやく見つけることができません。 これを修正するには、CSSでselectedクラスをメインリストの対応する<li>要素に適用します。 たとえば、ヒーローのリストからマゼンタを選択すると、次のように背景色を変更して視覚的に強調表示することができます。

テンプレートでselectedクラスを設定するために、 class要素にバインディングプロパティを追加します。 これは、現在のselectedHeroとheroを比較する式によって行います。
キーはCSSクラスの名前です（ selected ）。 両方のヒーローが一致する場合、値はtrue（ true ）、そうでない場合はfalse（ false ）です。 「文字が一致する場合はselectedクラスを適用し、一致しない場合は削除します」と言います 。

app.component.ts（CSSクラスの設定）

  [class.selected]="hero === selectedHero" 

テンプレートでは、 class.selected角括弧（ [] ）で囲まれていることに注意してください。 これは、データソース（式hero === selectedHero ）からclassプロパティにデータフローが一方向に進むプロパティバインディングの構文です。

app.component.ts（各ヒーローの様式化）

  <li *ngFor="#hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> 

プロパティのバインドの詳細については、テンプレートの構文の章を参照してください。

ブラウザがアプリケーションを再起動します。 マゼンタのヒーローを選択します。選択は背景色によって明確に識別されます。

別のヒーローを選択すると、背景色がこのヒーローに切り替わります。

現時点でのapp.component.tsの完全なコンテンツはapp.component.tsです。

 import {Component} from 'angular2/core'; export class Hero { id: number; name: string; } @Component({ selector: 'my-app', template:` <h1>{{title}}</h1> <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="#hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <div *ngIf="selectedHero"> <h2>{{selectedHero.name}} details!</h2> <div><label>id: </label>{{selectedHero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="selectedHero.name" placeholder="name"/> </div> </div> `, styles:[` .selected { background-color: #CFD8DC !important; color: white; } .heroes { margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em; } .heroes li { cursor: pointer; position: relative; left: 0; background-color: #EEE; margin: .5em; padding: .3em 0; height: 1.6em; border-radius: 4px; } .heroes li.selected:hover { background-color: #BBD8DC !important; color: white; } .heroes li:hover { color: #607D8B; background-color: #DDD; left: .1em; } .heroes .text { position: relative; top: -3px; } .heroes .badge { display: inline-block; font-size: small; color: white; padding: 0.8em 0.7em 0 0.7em; background-color: #607D8B; line-height: 1em; position: relative; left: -1px; top: -4px; height: 1.8em; margin-right: .8em; border-radius: 4px 0 0 4px; } `] }) export class AppComponent { title = 'Tour of Heroes'; heroes = HEROES; selectedHero: Hero; onSelect(hero: Hero) { this.selectedHero = hero; } } var HEROES: Hero[] = [ { "id": 11, "name": "Mr. Nice" }, { "id": 12, "name": "Narco" }, { "id": 13, "name": "Bombasto" }, { "id": 14, "name": "Celeritas" }, { "id": 15, "name": "Magneta" }, { "id": 16, "name": "RubberMan" }, { "id": 17, "name": "Dynama" }, { "id": 18, "name": "Dr IQ" }, { "id": 19, "name": "Magma" }, { "id": 20, "name": "Tornado" } ]; 

歩いた道

この章で達成したことは次のとおりです。

• ヒーローツアーにヒーローのリストが表示されるようになりました。
• ヒーローを選択し、選択したヒーローに関する詳細情報を表示する機能を追加しました。
• コンポーネントテンプレートでngIfおよびngFor組み込みディレクティブを使用する方法を学びました。

アプリケーションを起動する、パート2

今後のパス

私たちのヒーローツアーは成長しましたが、まだ完全ではありません。 アプリケーション全体を1つのコンポーネントに入れることはできません。 それをサブコンポーネントに分解し、それらを連携させる方法を教える必要があります。 次の章でこれを行う方法を学びます。