Question

我正在阅读有关角度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的src为$ {loadingGif} - 即loadingGif 变量来自程序早期的require语句。这里我们正在利用webpack的图像加载功能。如果你想要了解有关其工作原理的更多信息，请查看webpack配置在本章的示例代码或结帐中图像的WebPack-loader⁴²。

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

Answer 1

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

src='${loadingGif}'

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

的内容

以下`src ='$ {loadingGif}'如何在角度组件内工作

1 个答案: