在外部模板资源中使用字符串插值

Question

我正在重构一个进行模板嵌套的 Angular 2 组件。

原来的代码是这样的：

（组件.ts）

let subItemTemplate = require('./sub-item-template.html');

@Component({
selector: 'my-component',
template: `
  <div *ngIf="isSingle">
    ${subItemTemplate}
  </div>
  <div *ngIf="isMulti">
    ${subItemTemplate}
  </div>
`
})
export default class MyComponent{
}

使用内联模板，效果很好 - 我的 subItemTemplate 的字符串插值已成功解析，并且我的组件可以正常工作。

当我将组件模板移动到外部文件中时，这将停止工作：

let subItemTemplate = require('./sub-item-template.html');

@Component({
selector: 'my-component',
template: require('./my.component.html')
})
export default class MyComponent{
}

现在我的浏览器出现运行时异常：

zone.min.js:1 未处理的承诺拒绝：模板解析错误： 意外字符“EOF”（您的文件中是否有未转义的“{” 模板？使用 "{{ '{' }}") 转义它。) ("

唯一的变化是将我的模板移动到外部文件。

我认为这可能是两个主要问题之一。要么是我不理解的 Angular 限制，要么 Angular 是一个红鲱鱼，这实际上是我的编译脚本中的一个问题（最终与 browserify 捆绑）。

Answer 1

你好像做错了。

在第一种方式中，您通过字符串编写模板并像字符串一样导入子模板。使用字符串插值，您可以连接。带有子模板的模板，然后 Angular 2 在加载组件时解析结果。

在第二种方式中，您的模板被导入并提供给 Angular 2。但子模板是单独的，从不使用/concat。

为什么需要在组件中添加子模板？

因为这个组件需要子模板？

所以，用模板制作一个子组件，并将其用作父组件，它可读且容易。

如果需要传递数据或事件，请检查@Input 和@Output 装饰器。

如果你真的需要添加子模板，他们有很多方法可以做到这一点，比如@ViewChild。检查 Angular 2 文档。