この素晴らしきフロントエンドに祝福を

アニヲタからフロントエンドエンジニアへ転身した私の備忘録。

angular2入門【ディレクティブ編】

こんにちわ、
ゼットンです。

今日はangular2のディレクティブを
作ってみましょう。

ディレクティブについて簡単に説明すると、
HTML要素に対して修飾や振る舞いの変化を
与えるものです。

口で説明するより
実際にやってみた方が早いので
早速手を動かしてみましょう。

例によって
ng newをした後からスタートです。

https://www.evernote.com/l/AS3VRC7AXjlJkLbMhu4mr3-lhPmk8LrFspgB/image.png

https://www.evernote.com/l/AS1nvFoLPiFAXY3gdC3dQ6q2udpYqQ1GenEB/image.png

お、マリさんが来たので、
今回はタイトルを少々変えましょう。

https://www.evernote.com/l/AS3vhLTuJ1FLeLcZ_uP2EN1LJjFd7rRuuFAB/image.png

画面はこうなってます。

https://www.evernote.com/l/AS0Qe5iWudJPx5wTLBXuCIxDd_PbyQLYHCEB/image.png

では、今回のテーマのディレクティブを作ります。
src>appフォルダ配下に
shiny.directive.tsというファイルを追加します。

https://www.evernote.com/l/AS1x_Q4UuXVH_oldNezkNifCcqMnlNxEpskB/image.png

内容はこのようにしてみました。

https://www.evernote.com/l/AS3lYvkbmGFERaM_Aocw8k2T9Hi4uqIrujMB/image.png

importするのは3つのモジュール。
それぞれの役割は以下になります。
・Directive    ・・・ディレクティブの定義付け
・ElementRef  ・・・ HTML要素へのアクセス
・Renderer   ・・・ 要素の修飾

@Directiveのselectorプロパティに
ディレクティブ名を定義します。
this.el.nativeElementによって
ディレクティブが付与されるHTML要素に
アクセスできます。
それをrendererのsetElementStyleメソッドに第1引数として
渡し、CSSの指定を第2、3引数で行っています。 ではこのディレクティブを使ってみましょう。
app-rootに下記を追加実装します。

https://www.evernote.com/l/AS38R_pjIJ5KIYEFljOqOPapj0oXx6RyfJEB/image.png

先ほど作成したディレクティブを読み込み、
h1タグにディレクティブ名を与えています。

次に、モジュールに作成したディレクティブを追加します。
app.module.tsを下記のようにします。

https://www.evernote.com/l/AS1ZgJrdtQNIrJ61C34hwB6HaQNhEn9ZFckB/image.png

declarationsに作成したディレクティブを
登録することをお忘れなく。

ここまできたら
画面を確認してみましょう。

https://www.evernote.com/l/AS1N4VZNvQNEZqCY7iBUh5f2CV1BEyyPsgYB/image.png

https://www.evernote.com/l/AS2eXwdZdd5EwpPRivDKP1CdSxRMan2dp_oB/image.png

ありがとうございました。