22

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>
4

6 回答 6

31

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

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

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

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

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

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

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

于 2016-01-08T13:26:29.457 回答
16

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

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

来自 angular2 风格指南：

当超过 3 行时，请务必将模板和样式提取到单独的文件中。

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

为什么？当不与内联模板和样式混合时，组件文件的逻辑更易于阅读。

资源

于 2016-06-21T03:39:38.107 回答
2

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

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

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

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

于 2016-01-08T09:53:11.927 回答
2

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

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

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

于 2017-04-25T03:38:29.857 回答
2

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

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

于 2017-07-06T06:14:24.890 回答
0

似乎现在正在工作。

@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

于 2016-03-08T08:42:12.017 回答