javascript - 以下 `src=' $ {loadingGif }'`如何在 Angular 组件中工作

我正在阅读有关angular 2的书ng-book，内容如下:

let loadingGif: string = ((<any>window).__karma__) ? '' : require('images/loading.gif');

@Component({
  selector: 'youtube-search',
  template: `
  <div class='container'>
      <div class="page-header">
        <h1>YouTube Search
          <img
            style="float: right;"
            *ngIf="loading"
            src='${loadingGif}' />
        </h1>
      </div>

我对这部分感兴趣:

src='${loadingGif}'

书中的简短说明如下:



但是没有细节。有人可以如何运作吗？

最佳答案

这仅适用于内联模板(*.ts文件中的模板)，但不适用于模板位于*.html文件中(如templateUrl: './my.component.html)。

src='${loadingGif}'

是TypeScript字符串插值，与Angular不相关。它将${loadingGif}替换为loadingGif的内容