文字列内の補間方法は？

Question

次のような状況で複数の変数（クラスから）を補間するためのAngular2の方法は何ですか？

<img alt="" src="/images/{{userName}}/{{year}}/{{nameOfImage}}.jpg" /> 

私component.tsクラスには、次のようになります。

export class EditorsChoiceComponent { 

    userName = 'Black Ranger'; 
    year = 'sometimeinthe90s'; 
    nameOfImage = 'gogopowerrangers' 
} 

Answer 1

それはtemplate stringとaccessorを使用して、クラスでそれを行うのに十分に簡単です：

export class EditorsChoiceComponent { 
    userName = 'Black Ranger'; 
    year = 'sometimeinthe90s'; 
    nameOfImage = 'gogopowerrangers'; 

    get imageSrc() { 
    return `/images/${this.userName}/${this.year}/${this.nameOfImage}.jpg`; 
    } 
} 

結合が簡単になります

ではなく、

<img alt="" [src]="imageSrc" /> 

Answer 2

あなたはすでにそれを持っているように動作するはずです：

<img alt="" src="/images/{{userName}}/{{year}}/{{nameOfImage}}.jpg" /> 

例：

@Component({ 
    selector: 'blue', 
    template: 'Hello <img src="https://{{server}}/{{path}}" />' 
}) 
export class BlueComponent { 
    server:string='encrypted-tbn3.gstatic.com' 
    path: string='images?q=tbn:ANd9GcShusMbGevCg9avhj28vFlBQsUlv49OFoXWUDyHmZOawWZUEm0L0TSB526d' 

} 

デモ：

http://plnkr.co/edit/VOMYCN3sLMsqZQxn1jAJ?p=preview