angular2入門【ディレクティブ編】
こんにちわ、
ゼットンです。
今日はangular2のディレクティブを
作ってみましょう。
ディレクティブについて簡単に説明すると、
HTML要素に対して修飾や振る舞いの変化を
与えるものです。
口で説明するより
実際にやってみた方が早いので
早速手を動かしてみましょう。
例によって
ng newをした後からスタートです。
お、マリさんが来たので、
今回はタイトルを少々変えましょう。
画面はこうなってます。
では、今回のテーマのディレクティブを作ります。
src>appフォルダ配下に
shiny.directive.tsというファイルを追加します。
内容はこのようにしてみました。
importするのは3つのモジュール。
それぞれの役割は以下になります。
・Directive ・・・ディレクティブの定義付け
・ElementRef ・・・ HTML要素へのアクセス
・Renderer ・・・ 要素の修飾
@Directiveのselectorプロパティに
ディレクティブ名を定義します。
this.el.nativeElementによって
ディレクティブが付与されるHTML要素に
アクセスできます。
それをrendererのsetElementStyleメソッドに第1引数として
渡し、CSSの指定を第2、3引数で行っています。
ではこのディレクティブを使ってみましょう。
app-rootに下記を追加実装します。
先ほど作成したディレクティブを読み込み、
h1タグにディレクティブ名を与えています。
次に、モジュールに作成したディレクティブを追加します。
app.module.tsを下記のようにします。
declarationsに作成したディレクティブを
登録することをお忘れなく。
ここまできたら
画面を確認してみましょう。
ありがとうございました。