Angularヒーローチュートリアル2

コンポーネント

コンポーネントの作成

ターミナル

$ cd src/app
$ ng generate component heroes

このコマンドでheroesディレクトリがコンポーネント(要素)として作成され、中には

• heroes.component.ts
• heroes.component.html
• heroes.component.css
• heroes.component.spec.ts

が自動で作成されています。
ここで登場したspec.tsファイルはテスト用のファイルです。

動作の確認

app.component.html

<h1>{{title}}</h1>
<app-heroes></app-heroes>

このように書くとheroesコンポーネントを組み合わせることができます。

こんなんが出てきますね。

また前回のようにtsファイルの値をHTMLに表示してみたいと思います。
まず、型を定義するファイル(Heroクラス)をsrc/appに作ります。

ターミナル

$ cd src/app
$ touch hero.ts

hero.ts

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

これを他のファイルからインポートすることでこの型を使用することができます。

heroes.component.ts

import { Component, OnInit } from '@angular/core';
import {Hero} from '../hero';//ここでインポート

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  hero: Hero = {//ここを追加
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

ここで、heroがオブジェクトになったのでHTMLファイルを変更しなければいけません。

hero.component.html

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

1行目の| uppercaseは大文字にするためのパイプです。

このように詳細が表示されるようになりました。

プロパティを編集する

次にヒーローの詳細でnameプロパティを変更できるようにします。
要するにヒーローの名前を変えます。

まず、そのためにFormsModuleをインポートする必要があります。
このように新たなライブラリやモジュールをインポートするときにはapp/app.module.tsに記述しなければ使用できません。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';//ここを追加

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule//ここを追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

モジュールをインポートできたら、htmlを変更します。

heroes.component.html

<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

この[(ngModel)]が、双方向データバイディングといいます。これをhero.nameに指定することによってnameプロパティを変更させることができます。

この出来上がったフォームの中身を変更することによって、ヒーローの名前を変更することができます。