javascript - 補間とプロパティバインディングの違い

Question

プロパティを定義するコンポーネントがありimageUrl、テンプレートでこのプロパティを使用して画像の URL を設定します。補間とプロパティバインディングを使用してこれを試しましたが、どちらも機能しますが、2つの違いや、どちらをいつ使用するかを見つけることができません。誰も違いを知っていますか？

<img [src]='imageUrl' >

<img src= {{ imageUrl }} >

Answer 1

Angular は二重中括弧内のすべての式を評価し、式の結果を string に変換し、それらを隣接するリテラル文字列と連結します。最後に、この複合補間結果を要素またはディレクティブ/コンポーネント プロパティに割り当てます。-- https://angular.io/docs/ts/latest/guide/template-syntax.html#!#interpolationから

プロパティ バインディングは、式の結果を文字列に変換しません。

したがって、文字列以外のものをディレクティブ/コンポーネント プロパティにバインドする必要がある場合は、プロパティ バインドを使用する必要があります。

Answer 2

Angular での補間は、プロパティ バインディングの代替アプローチにすぎません。これは、プロパティ バインディングに変換される特別なタイプの構文です。

ただし、プロパティ バインディングの代わりに補間を使用する必要があるシナリオがいくつかあります。たとえば、文字列を連結する場合は、プロパティ バインドの代わりに角度補間を使用する必要があります。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
    template: `<div>
                    <img src="https://angular.io/assets/images/logos/angular/{{imageName}}">            
               </div>`
})
export class AppComponent {
  imageName: string = "logo-nav2x.png";
}