Angularのデータバインディングという仕組み

Angularのデータバインディングという仕組み

最近勉強する時間が全然ない@takahashiです。

コンポーネントとビューを紐づけるための仕組みなんですが、コンポーネントって何?って感じです。個人的にはクラスでいいんじゃないかと思っています。ビューはhtmlみたいな。

この二つを合わせてカスタムタグでいいんじゃないかと思っています。<takahashi></takahashi>みたいな。

データバインディングとはこのクラスとhtmlとの間でのデータの変化を伝える仕組みなわけです。

伝えるといっても色々あって、

  • コンポーネント → ビュー
  • ビュー → コンポーネント
  • コンポーネント ⇔ ビュー

と、色々あります。

コンポーネント → ビュー

コンポーネントのプロパティをビューに反映してみます。

dell.component.ts(コンポーネントというかクラス)

次にコンポーネントのプロパティをビューに反映させます。{{プロパティ}}で表示ができます。

dell.component.html

これで<app-dell></app-dell>としてng serveで起動してみます。

Angularのデータバインディングという仕組み

コンポーネントのプロパティがビューに反映されていることが確認できます。これが、「コンポーネント → ビュー」の型方向通信になります。

他にも色々バインディングする方法が提供されていて、たとえばコンポーネントのプロパティから<a>タグ(なんでも良いが)の属性を反映するプロパティバインディングというのがあります。

dell.component.ts

以下のようにビューで記述します。

具体的には

とします。

dell.component.ts

これで、ng serveで起動すると以下のようにアンカーが表示されます。

Angularのデータバインディングという仕組み

リンクをクリックすると、ヤフーに遷移します。これがプロパティバインディングという仕組みです。

※プロパティバインディングで全ての属性が、同名のプロパティを持っているわけではないのでご注意ください。

属性バインディング

属性をバインドしたい時に使用する仕組みです。

属性はあるが、プロパティがないという属性に対して使用すると思います。

記述方法はプロパティバインディングと良く似ていて、attr.を付けるだけです。

dell.component.ts

dell.component.html

value属性はプロパティでもvalueを持っていますが、属性バインディングでもデータを紐づけることができます。

ビュー → コンポーネント

ビュー(画面)でボタンを押したりして、その結果をコンポーネントに情報を渡す仕組みがあります。これもデータバインディングで片方向通信となります。

ビュー(画面)でテキストボックスを表示してみます。onblur時にイベントを実行し、コンポーネントのメソッドを実行させてみます。

dell.component.ts

dell.component.html

Angularのデータバインディングという仕組み

主なeventは以下のとおりです。

イベント 動作
click クリック時
blur 要素からフォーカスアウト時
input 入力時
reset リセット時
submit サブミット時
focus 要素にフォーカス時

$event はイベントの色々な情報を持っているオブジェクトになります。引数で指定しておくと、コンポーネント側の引数でイベント内容を渡すことが可能になります。

コンポーネント ⇔ ビュー

双方向通信は、[(ngModel)] を使用します。

dell.component.ts

dell.component.html

ngModelディレクティブを使用することによってフォーム部品とコンポーネントのプロパティとを紐づけた場合、同期しているため、input部品のvalue属性の初期値は反映されないので注意です。

ということはコンポーネントのプロパティに初期値を入れておけば、初期値がレンダリングされるはずです。

dell.component.tsを以下のように変更してみます。

dell.component.ts

初期表示すると以下のように初期値が表示されることが確認できます。

Angularのデータバインディングという仕組み

クラスバインディング

クラスバインディングという仕組みが用意されています。これはHTMLタグにclass属性を追加する仕組みです。

変数名はtrueまたはfalseである必要があります。

例えば、tableタグで作成した表で、クリックした行の背景を変える、というのをクラスバインディングで実装してみます。

app.component.ts

クリックした行のみ背景色が変わります。

Angularのデータバインディングという仕組み

詳細は「AngularとTypeScriptでSPAを作成する」を参照ください。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA