Angularで遊ぶ(1) - データバインディング - Interpolationとプロパティバインディング

この本で勉強してる。安定の山田祥寛クオリティ。感謝しかない。Amazonへのリンクを貼ってますが、技術評論社の本なのでPDF版が買えますからそちらをお勧め。下のリンクからどうぞ。

Angular アプリケーションプログラミング | Gihyo Digital Publishing … 技術評論社の電子書籍

さて、まずは3章のデータバインディング。JavaScriptの世界とDOMの世界をどうつなぐかと言う話であり、フロントエンドのフレームワークがどうしてもやらなきゃいけないのはここだけかもしんまい。

QuickStartのapp.component.htmlを書き換えて遊ぶ。

<div style="text-align:center">
  <h1>
    <!-- Interpolationの例 -->
    Welcome to {{ title?.name }}!
  </h1>
  <!-- プロパティバインディングの例 -->
  <img width="45" alt="Angular Logo" [src]='logo'>
</div>
<!-- プロパティバインディングでHTML文字列をバインド -->
<div [innerHTML]="msg"></div>
<!-- サニタイズを無効にしたHTML文字列をバインド -->
<div [innerHTML]="safeMsg"></div>

app.component.tsはこんな感じ

export class AppComponent {
  title = {
    name:'hoge',
  };

  logo = "img/angular.png";

  msg = `
  <ul>
    <li>いちばんめ<input type="text" value="このinputはみえない"></li>
    <li>にばんめ</li>
  </ul>
  `;

  safeMsg: SafeHtml;
  msg2 = `
  <ul>
    <li>はれのひ<input type="text" value="このinputはみえる"></li>
    <li>あめのひ</li>
  </ul>
  `;

  constructor(private sanitizer: DomSanitizer){
    // msg2プロパティの内容に信頼済みマークを付与
    this.safeMsg = sanitizer.bypassSecurityTrustHtml(this.msg2);
  }

結果のHTMLはこうなる

<div _ngcontent-c0="" style="text-align:center">
    <h1 _ngcontent-c0=""> Welcome to hoge! </h1>
    <img _ngcontent-c0="" alt="Angular Logo" width="45" src="img/angular.png">
</div>
<div _ngcontent-c0="">
    <ul>
        <li>いちばんめ</li>
        <li>にばんめ</li>
    </ul>
</div>
<div _ngcontent-c0="">
    <ul>
        <li>はれのひ<input type="text" value="このinputはみえる"></li>
        <li>あめのひ</li>
    </ul>
</div>

?.はもしtitleにnameというプロパティがなくてもエラーにならない。 titleが存在しなかったり、nullだったり、title.nameがnullだったりはそもそもエラーにならない。 エラーになるケースが微妙すぎて、逆にいつ使えばいいのかわかりづらい感あり。

次のIMGタグのsrcを書き換えている例は、`[src]="logo"にすると「pngというプロパティがないよ」というエラーになる。 つまり画像のパスをコードとして評価してしまっているようだ。本のサンプルには""でくくってあったので、謎。

HTMLを埋め込むには{{ }}じゃなくて、innerHTMLにセットしないとセキュリティ的なことで怒られる。 innerHTMLにセットする場合もINPUTタグやSCRIPTタグは取り除かれちゃうので、 入れたかったら安全マークをつけないといけない。