Question

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

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

第一种方法：

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

VS 第二种方法：

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

与multi-line.html一起：

<h1>My First Angular 2 multiline template</h1>
<p>Second line</p>

Answer 1

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

但是，对于开发人员而言，您必须考虑许多不同之处。

在大多数情况下，当HTML位于单独的.html文件中时，您可以在编辑器/ IDE中获得更好的代码完成和内联支持。（IntelliJ IDEA，至少支持内联模板和字符串的HTML）
在同一文件中使用代码和关联的HTML有一个便利因素。它更容易看出两者如何相互关联。

这两件事对于很多人来说都是同等价值的，所以你只要挑选自己喜欢的东西，就可以继续生活，如果这就是它的全部。

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

目前在Angular 2中很难制作use of relative filepaths for external templates。
对外部模板使用非相对路径会使您的组件的可移植性降低，因为您需要管理根目录中的所有/where/is/my/template类型引用，具体取决于组件的深度。

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

Answer 2

缺点是IDE工具不像上面提到的那么强大，并且将大量的html放入组件中会使它们更难阅读。

此外，如果您遵循angular2样式指南，则建议您执行在超过3行时将模板提取到单独的文件中。

来自angular2风格指南：

执行将模板和样式提取到单独的文件中，超过3时   线。

为什么？（.js和.ts）代码文件中的内联模板的语法提示是   一些编辑不支持。

为什么？组件文件的逻辑在没有混合时更容易阅读   内联模板和样式。

Source

Answer 3

您可以将字符串文字传递给由您的组件HTML组成的template。这样，您就可以在与TypeScript代码相同的文件中使用HTML源代码。

使用templateUrl，您将引用包含模板HTML的外部文件。这样，您就可以在单独的文件中使用HTML和TypeScript。

在外部文件中，您通常更好地支持自动完成和语法检查，但可能很麻烦，因为每个组件都包含多个文件而不是一个（还有样式）。外部文件需要在构建步骤中内联，否则您将有大量服务器请求加载所有模板文件。

Angular2样式指南建议不要使用超过3行的内联模板。

Answer 4

大多数答案都与编辑器支持有关，但是，虽然这个论点是正确的，但我并不认为这是将html和css放入.html和.css文件的强项。

我将html和css文件分开的主要原因是它遵循SRP。它允许简单的代码可移植性和重用作为Angular更改版本和如何布置打字稿的语法，你的html和css大部分都保持不变。

Answer 5

如果您正在开发应该在其他项目中使用的Angular2 + 库，则可能会出现将模板HTML放入单独文件的缺点之一。

在这种情况下，您的图书馆的消费者可能无法成功执行JIT编译，除非他们使用angular2-template-loader或angular2-rollup等模板加载器或其他任何模板加载器，具体取决于应该正确配置的bundler，有时可能会很棘手。

为了避免这个缺点并且仍然在单独的文件中使用模板（我认为非常方便），库开发人员可能会使用Gulp插件（例如 gulp-inline-ng2）自动自动内联模板 -template 或任何其他。但这意味着在构建ES2015版本的库时会增加复杂程度。

Answer 6

似乎现在正在工作。

@Component({
  selector: 'my-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})

取自'英雄之旅'https://angular.io/docs/ts/latest/tutorial/toh-pt5.html并改编以测试这个具体问题。

angular2@2.0.0-beta.8

使用组件模板与templateUrl的差异

6 个答案: