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

Question

我正在阅读关于 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}'

书中的简短说明如下:

Notice that our img has a src of ${loadingGif} - that loadingGif variable came from a require statement earlier in the program. Here we’re taking advantage of webpack’s image loading feature. If you want to learn more about how this works, take a look at the webpack config in the sample code for this chapter or checkout image-webpack-loader⁴².

但没有详细信息。有人可以请问这一切是如何运作的吗？

Answer 1

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

src='${loadingGif}'

是 TypeScript 字符串插值，与 Angular 无关。它将 ${loadingGif} 替换为 loadingGif

的内容