Angularお勉強 ～その６～

• • • • • • • • • • • • • -

• • • • • • • • • • • • • -

The Hero Editor

コンポーネントの生成

今回のチュートリアルではヒーローの詳細情報を表示するコンポーネントを追加する
コンポーネントを新規にプロジェクトに追加する場合、ng generate component コマンドで作れる
普通にファイルをコピペして作っても出来るが今回はコマンドから

ng generate component heroes

CREATE src/app/heroes/heroes.component.html (25 bytes)
CREATE src/app/heroes/heroes.component.spec.ts (628 bytes)
CREATE src/app/heroes/heroes.component.ts (269 bytes)
CREATE src/app/heroes/heroes.component.css (0 bytes)
UPDATE src/app/app.module.ts (396 bytes)

変更点としてはheroesフォルダが出来てその中にAppComponentがワンセット作成される
自動作成されたtsファイルの方はOnInitがインポートされてコンストラクタとかが空生成される模様
あとはappModuleのdeclarationsにHeroesComponentが追加される（依存関係的な？）

生成したコンポーネントについて

You always import the Component symbol from the Angular core library and annotate the component class with @Component.

コンポーネントファイルにはComponentをインポートして@Componentアノテーションをつける必要がある
@ComponentはAngularメタデータを指定するデコレータ関数とのこと
要するにHTMLファイルやCSSファイルとかの参照を保持する
自動生成されるメタデータは次の３つ（３つ以上ある？）

1. selector— the component's CSS element selector
2. templateUrl— the location of the component's template file.
3. styleUrls— the location of the component's private CSS styles.

selectorで指定した名前が、親クラスにコンポーネントを埋め込む際の名前になる
要するにselectorにapp-heroesとか定義すると、親クラスのHTMLにのように埋め込める

ngOnInit関数は、Angularのライフサイクルの中のステータスの一つで、onInitなので初期化時に呼ばれるイベント
コンポーネント作成後すぐに呼ばれるので、初期化処理とかをおくのに適する

ここで作ったコンポーネントは、今回AppModuleに追加したみたいに簡単に他所のモジュールに追加できる

コンポーネントの編集

適当に変数とか作って表示してみる

>heroes.component.ts
hero = 'Windstorm';

>heroes.component.html
{{hero}}

>src/app/app.component.html
<h1>{{title}}</h1>
<app-heroes></app-heroes>

app.component.htmlにheroes.component.tsで定義したselectorを埋め込んでいる
ng serveで起動すると、ちゃんとheroesコンポーネントが表示されていることがわかる

クラスの作成

実際にヒーローの詳細を作っていく
src/appフォルダ以下に、TSファイルを作成してクラスを作る
中身は下記感じ

export class Hero {
  id: number;
  name: string;
}

自分でファイルを作ってもいいが、ng generateでも作れる（といっても大して変わらないけど）
ng generate class Hero
でsrc/appフォルダ以下にhero.tsファイルが作成され、空のクラスが作成される

作ったクラスをheroesコンポーネントにインポートする

import { Hero } from "../hero";

これでコンポーネント内でHeroクラスが使える
変数としてクラスの定義は下記（この辺はTSのお作法かな？）

hero : Hero = {
id : 1,
name : 'Windstorm'
}

heroesコンポーネントのHTMLを下記のように変えてヒーローの詳細を表示する

<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

ng serveで結果を確認すると、ちゃんと変わっている

長くなってきたのでいったんここまで
続きは次回書きます