使用组件模板与 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

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

对于 templateUrl，您引用的是包含模板 HTML 的外部文件。这样你就可以在不同的文件中得到 HTML 和 TypeScript。

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

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

Answer 2

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

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

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

这两件事对很多人来说都具有同等价值，所以如果仅此而已，您只需选择自己喜欢的并继续生活。

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

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

这就是为什么我建议您将模板放在组件中容易找到的地方。此外，如果您发现您的内联模板变得越来越大且难以使用，那么这可能表明您无论如何都应该将您的组件分解成几个更小的组件。

Answer 3

现在似乎在工作。

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

摘自 'tour of heros' https://angular.io/docs/ts/latest/tutorial/toh-pt5.html 并改编以测试这个具体问题。

angular2@2.0.0-beta.8

Answer 4

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

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

来自 angular2 风格指南：

Do extract templates and styles into a separate file, when more than 3 lines.

Why? Syntax hints for inline templates in (.js and .ts) code files are not supported by some editors.

Why? A component file's logic is easier to read when not mixed with inline template and styles.

Source

Answer 5

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

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

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

Answer 6

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

我将 html 和 css 文件分开的主要原因是它跟在 SRP 之后。它允许轻松的代码移植和重用，因为 Angular 更改了打字稿布局的版本和语法，你的 html 和 css 大部分保持不变。

使用组件模板与 templateUrl 的区别

Differences of using Component template vs templateUrl

angular2-template

angular