Question

我正在重构一个Angular 2组件，它可以进行一些模板嵌套。

原始代码是这样的：

（component.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.但子模板是单独的，从不使用/连接。

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

因为子模板在这个组件中是必需的吗？

因此，使用模板创建一个子组件，并将其用作父组件，它可读且简单。

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

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

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

1 个答案: