Angular 2允许使用`字符来引用它们来编写多行模板.也可以将多行模板放入.html文件中并引用它templateUrl.

将模板直接放入组件中似乎很舒服,因为它只是在一个地方,但这样做有什么缺点吗？

第一种方法:

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template: `
    
My First Angular 2 multiline template
    
Second line
 
    `
})
export class AppComponent { }

vs第二种方法:

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    templateUrl: 'multi-line.html'
})
export class AppComponent { }

连同multi-line.html:

My First Angular 2 multiline template
Second line
 

Michael Oryl.. 25

就最终应用程序的执行方式而言,嵌入式模板和外部模板之间没有真正的区别.

但是,对于开发人员而言,您必须考虑许多差异.

在大多数情况下,当HTML位于单独的.html文件中时,您可以在编辑器/ IDE中获得更好的代码完成和内联支持.(IntelliJ IDEA,至少支持内联模板和字符串的HTML)

在同一文件中使用代码和关联的HTML有一个方便的因素.更容易看出两者如何相互关联.

这两件事对很多人来说都是同等价值的,所以你只需选择自己喜欢的东西,然后继续生活,如果这就是它的全部.

但是,在我看来,这导致了我们应该将模板保留在组件中的原因:

对于外部模板很难使用相对文件路径,因为它目前位于Angular 2中.

对外部模板使用非相对路径会使组件的可移植性降低,因为您需要/where/is/my/template根据组件的深度来管理根目录中的所有类型引用.

这就是为什么我建议您将模板放在组件中,以便轻松找到它们.此外,如果您发现您的内联模板变得庞大且笨重,那么这可能表明您应该将组件分解为几个较小的组件,无论如何.

1> Michael Oryl..：

---

就最终应用程序的执行方式而言,嵌入式模板和外部模板之间没有真正的区别.

但是,对于开发人员而言,您必须考虑许多差异.

在大多数情况下,当HTML位于单独的.html文件中时,您可以在编辑器/ IDE中获得更好的代码完成和内联支持.(IntelliJ IDEA,至少支持内联模板和字符串的HTML)

在同一文件中使用代码和关联的HTML有一个方便的因素.更容易看出两者如何相互关联.

这两件事对很多人来说都是同等价值的,所以你只需选择自己喜欢的东西,然后继续生活,如果这就是它的全部.

但是,在我看来,这导致了我们应该将模板保留在组件中的原因:

对于外部模板很难使用相对文件路径,因为它目前位于Angular 2中.

对外部模板使用非相对路径会使组件的可移植性降低,因为您需要/where/is/my/template根据组件的深度来管理根目录中的所有类型引用.

这就是为什么我建议您将模板放在组件中,以便轻松找到它们.此外,如果您发现您的内联模板变得庞大且笨重,那么这可能表明您应该将组件分解为几个较小的组件,无论如何.

---

您可以将模板放在单独的文件中,并通过将模板作为字符串导入来使用```template```属性.该组件不再受其模板位置的约束,可以在任何地方使用.```从'app/dashboard.html'导入myTemplate; @Component({selector:'dashboard',template:myTemplate})```

---

我一直在开发中分别编写html视图,但是后来使用gulp-angular-embed-templates将html嵌入到组件中进行生产

---

@你可以在cjs中使用`const template = require(./ template.html)`而不是`import`.在类型脚本2.0中,您将能够在不丢失类型安全的情况下执行此操作

2> swestner..：

---

缺点是IDE工具没有上面提到的那么强大,并且将大量的html放入组件中会使它们难以阅读.

另外,如果你是以下的angular2风格指南,它建议你做模板提取到一个单独的文件比3线较长时.

来自angular2风格指南:

不要提取模板和样式到一个单独的文件,当超过3行.

为什么？某些编辑器不支持(.js和.ts)代码文件中的内联模板的语法提示.

为什么？未与内联模板和样式混合时,组件文件的逻辑更易于阅读.

资源