ペロハム大学

ﾔﾙｿﾞｰ

Angularチュートリアルをやる 2日目

Angular

■ 思ったこと

バインドって聞くとサバクのネズミ団を思い出す！ということでチュートリアル続き

2. リストの表示

ヒーローのモックを作成

  • 表示用にモックデータを作るノダ、さっき作ったHeroクラスをインポートしてその型を基に配列を作ろう
  • heroes.component.tsにプロパティを定義すればすぐにhtmlでバインディング！

反復ディレクティブ

  • for文的なやつ、*ngForをタグに埋め込むとそいつが繰り返して表示される
  • ディレクティブはhtml内で使えるカスタム属性
<li *ngFor="let hero of heroes">

ディレクティブもうちょっと詳しく

クリックイベントもバインディング！

  • 今リストをボタンで作成してるんだけど、それらのクリックイベントを作ろうという話
  • これはイベントバインディングを使いますね間違いない…ということで、htmlのbuttonに(event) = "handler"構文を埋め込むノダ
    <button
      [class.selected]="hero === selectedHero"
      type="button"
      (click)="onSelect(hero)"
    >
  • handlerはts側に作成しよう
  selectedHero?: Hero;
  // 送られてきたheroをselectedHeroに格納
  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

ngIfで詳細を出してみる

  • せっかくクリックしたヒーローを取得できるようになったので、使ってみよう
  • 今回は<div *ngIf="selectedHero"><div>で、selectedHeroが取得されてるときのみヒーローの詳細を表示するよーにした
    • 要するにクリックされたときってこったね！

クリックされたボタンを分かりやすくする

  • ボタンがクリックされた時だけCSSを追加してあげればよい
  • [class.selected]="hero === selectedHero"でtrueの時だけCSSにselectedのCSSが追加されマス、YES属性バインディング！
.heroes button:selected{
  background-color: #505050;
  color: white;
}

3. フィーチャーコンポーネントの作成

てな感じで今は一覧と詳細が一個のコンポーネントに書かれている感じだが、、こんなん分割するに越したことがないぜ！ ということでまずはng generate component hero-detailで新たなコンポーネントを作りました。例によって@NgModuleに追記も増えていた。確かに実行時のログ見たらUPDATE されてあったわ

CREATE src/app/hero-detail/hero-detail.component.html (26 bytes)
CREATE src/app/hero-detail/hero-detail.component.spec.ts (628 bytes)
CREATE src/app/hero-detail/hero-detail.component.ts (221 bytes)
CREATE src/app/hero-detail/hero-detail.component.css (0 bytes)
UPDATE src/app/app.module.ts (607 bytes)

htmlの分割

  • heroes.component.htmlからhero-detail.component.htmlに詳細部分を持ってきました
  • もとは*ngIf="selectedHero"だったけど、詳細コンポーネントは受け取ったheroをただ表示すればいーので<div *ngIf="hero">に書き換える
  • しかし、Hero型がtsファイルにインポートされてないからエラー出るぞ！次！

子コンポーネントで@Input()

  • hero-detail.component.tsは外部からデータを受け取る身、子コンポーネントだったのだ
  • それゆえ、ただHero型をインポートすればいいだけではなかった。データ受け取ります！宣言しなきゃいけないらしい
  • というわけなので、heroを使いたいなら、@Input() hero?: Heroと書こう

親コンポーネントはhtmlで プロパティバインディング

  • こういうことだ！
<!--
HeroesComponent.selectedHero → ターゲット要素.hero
への単方向データバインディング
-->
<app-hero-detail [hero]="selectedHero"></app-hero-detail>

■ 感想

専門用語が難しいのでその都度調べてやるしかない！次の章から一気にレベルアップする気がするぜ！