Componentってなに

Componentはビューとロジックをもった要素。

Componentを作る

• @Component（メタデータ）をつけて

@Component({
  selector: 'alert-button',
  template: `
    <button (click)="onClick()">Click me!</button>
  `
})

• classをexportする

export class AlertButtonComponent{
  onClick(): void {
    window.alert('Hello!!');
  }
}

メタデータに名前（セレクタ）やテンプレート、スタイルを書きます。Javaでいうところのアノテーションみたいな感じですかね。書き方も似ていますし。classはそのまま、Java同様のクラスですね。そのコンポーネントの属性と振る舞いを書きます。

Componentを用意して組み合わせていくのが最近の向きらしいですね。プログラミングとして新しい概念ではありませんが、jQueryでDOM操作をガリガリするのがもう辛すぎたということでしょう。確かに辛かった。

Componentを利用する

• exportしたクラスをimportして

import {AlertButtonComponent} from './alert-button.component';

• メタデータのdirectivesに追加して
• メタデータのtemplateで使う

@Component({
  selector: 'my-app',
  template: `
    <h1>My First Angular 2 App R2</h1>
    <alert-button></alert-button>
  `,
  directives: [AlertButtonComponent]
})

Componentはselectorで名前がついているので、使う側はその名前にてtemplateで使う。

ソースコード

• til/javascript/angular2/angular2-practical-ABC-r2 at master · fukuchiharuki/til

参考

• Angular2のコンポーネント、bootstrap関数の概要 | VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで