使用组件模板与 templateUrl 的区别

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 { }

对比 第二种方法：

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

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

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

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

这两件事对很多人来说都是同等价值的，所以你只要选择你最喜欢的，继续生活，如果这就是全部的话。

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

1. 很难创建 use of relative filepaths for external templates，因为它目前在 Angular 2 中。
2. 对外部模板使用非相对路径会大大降低组件的可移植性，因为您需要从根目录管理所有 /where/is/my/template 类型引用，这些引用会根据组件的深度而变化。

这就是为什么我建议您将模板保存在组件中容易找到的地方。此外，如果您发现您的内联模板变得庞大且笨重，那么这可能表明您应该将您的组件分解为几个较小的组件。

Answer 2

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

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

来自 angular2 风格指南：

不要将模板和样式提取到单独的文件中，当超过 3 个时 行。

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

为什么？组件文件的逻辑在不与 内联模板和样式。

Source

Answer 3

您可以将字符串文字传递给template，其中包含您的组件HTML。这样，您就可以将 HTML 源代码与 TypeScript 代码放在同一个文件中。

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

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

Angular2 风格指南建议内联模板不要超过 3 行。

Answer 4

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

在这种情况下，您的库的使用者可能无法成功执行 JIT 编译，除非他们使用模板加载器，如 angular2-template-loader 或 angular2-rollup 或任何其他依赖于捆绑器的正确配置，有时可能会很棘手。

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

Answer 5

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

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

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