angular - 使用组件模板与 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 放在同一个文件中有一个方便的因素。更容易看出两者之间的关系。

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

但在我看来，这让我们想到了应该在组件中保留模板的原因:

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

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