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`;
  }
}

绑定可以是简单的property binding而不是插值：

<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

如何在字符串中插入？

2 个答案: