Angular2 コンポーネントについて、
覚えた事をまとめておく。

前回作成したhelloコンポーネントを使ってコンポーネントの動きについてみてみる。
前回の記事

コンポーネントは、HTML, CSS, TypeScriptの3つから構成される。

hello コンポーネントの場合は、

• hello.component.html
• hello.component.css
• hello.component.ts

といった感じで3つのファイルが生成される。

CSS

CSSファイルは特に説明する必要はなさそう。

ただ、一つのコンポーネントの中でローカルに定義される為、

他のコンポーネントにstyleの影響を与えることがなくなっている。

例えば以下のように、DIVタグに対するstyleを記述しても、
このコンポート内のDIVタグにのみスタイルが適用される。

div { backgroud: yellow; }

仕組みは、作成したコンポーネントのタグには、
_ngcontent-c0 のようなコンポーネント番号のようなユニークな
タグ属性が自動で追加されている。

そして、cssは、[_ngcontent-c0] を付けた形に自動的に展開されるため、
コンポーネントごとにローカルなスタイルが指定可能になっている。

<style>div[_ngcontent-c0] { background: yellow; }</style>

HTML

HTMLファイルは、普段のHTMLタグがそのまま利用できるが、
Angular2 用の特殊な書き方ができる。

片方向バインド

TS側の変数やメソッドの出力結果を、HTML側に出力

<div>Your Name: {{name}}</div>
<div>Your Name: {{foo()}}</div>

{{ }} で囲った部分が、TS側のメンバー変数とメソッドとなる。

双方向バインド

TS側の変数をHTML側の入力値や出力値として同期させる。

<input [(ngModel)]="name"/>

name の部分が、TS側のメンバ変数。
inputで入力した内容が、nameメンバ変数と同期される。

メソッドを指定する事はできない。

ループ

<ul>
  <li *ngFor="let val of [1,2,3];">{{val}}</li>
</ul>

3つのli要素が生成される。[1,2,3] の部分は、TS側のArray型のメンバ変数にする事も可能。

イベント

<button (click)="test($event)">TEST</button>

ボタンをクリックした時に、TS側のメンバメソッドをコールする事が可能。

click 以外にも、change/dblclick/blur など色々ある。

TypeScript

hello.component.ts

import {Component, OnInit} from '@angular/core';

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

  name: string = "tyabuta";

  constructor() {
    // クラス生成時
  }

  ngOnInit() {
    // HTML読み込みが完了した時
  }

  test(e: Object) {
    console.log(e);
  }

  foo() {
  }
}

@Component アノテーション

selector: 'app-hello'

作成したコンポーネントをHTMLで挿入する際につかうタグ名になる。

上記の場合、<app-hello></app-hello> というタグを使う事で、今回作成したコンポーネントが展開される。

templateUrl: './hello.component.html',

HTMLとなるファイルのパスを指定する（TSファイルからの相対PATHでいいのかな？）

template: '<p>hoge</p>' のようにする事で、ファイルじゃなくて、直接HTMLを文字列で指定する事も可能。

styleUrls: ['./hello.component.css']

templateUrl と同様、CSSファイルの指定。
こちらも同様に styleとすることで、文字列で直接指定する事ができる。

Plunker

Plunkerというサービスを使えば、てっとり速くAnguler2 のサンプルに触れる事ができる。

Plunker: Anguler2 Live Example

Plunkerっていろんなテンプレートが公開されているので、
自分にあったものを使ったり用意できるんですね。

---