以下 `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}'

这本书中的简短注释如下：

请注意，我们的 img 具有 ${loadingGif} 的 src - loadingGif 变量来自程序早期的 require 语句。在这里，我们利用了 webpack 的图像加载功能。如果您想了解更多有关此功能的工作原理，请查看本章示例代码中的 webpack 配置或查看 image-webpack-loader⁴²。

但是没有详细信息。请问有人能解释一下它是如何工作的吗？

- courses.indepth.dev

Answer 1

这仅适用于内联模板（即在*.ts文件中的模板），而不适用于模板位于*.html文件中的情况（例如templateUrl: './my.component.html）。

src='${loadingGif}'

中的字符串插值与Angular无关。它将${loadingGif}替换为loadingGif的内容。

- Günter Zöchbauer

---

“protected”是什么意思？ - Günter Zöchbauer

没问题。不太容易理解。虽然它不是数据绑定。${loadingGif}在Angular编译模板之前会被替换掉。如果loadingGif在运行时发生变化，src属性不会改变。要实现这一点，您需要使用Angular绑定，如src="{{loadingGif}}"或[src]="loadingGif"，但在这种情况下，loadingGif需要是组件类中的一个字段或getter方法。 - Günter Zöchbauer