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

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

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

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

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

这两件事对很多人来说都是同等价值的,所以你只需选择自己喜欢的东西,然后继续生活,如果这就是它的全部.

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

3. 对于外部模板很难使用相对文件路径,因为它目前位于Angular 2中.
4. 对外部模板使用非相对路径会使组件的可移植性降低,因为您需要/where/is/my/template根据组件的深度来管理根目录中的所有类型引用.

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

Answer 2

缺点是IDE工具没有上面提到的那么强大,并且将大量的html放入组件中会使它们难以阅读.

另外,如果你是以下的angular2风格指南,它建议你做模板提取到一个单独的文件比3线较长时.

来自angular2风格指南:

不要提取模板和样式到一个单独的文件,当超过3行.

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

为什么？未与内联模板和样式混合时,组件文件的逻辑更易于阅读.

资源