使用组件模板与templateUrl的区别 [英] Differences of using Component template vs templateUrl

问题描述

Angular 2允许通过使用`字符对多行模板进行引号来编写它们.也可以将多行模板放入.html文件中，并由templateUrl引用.

Angular 2 allows to write multi-line templates by using ` characters to enquote them. It is also possible to put multi-line template into .html file and reference it by templateUrl.

对我来说，将模板直接放入组件中似乎很自在，因为它全都放在一个地方，但是这样做有什么缺点吗?

It seems comfortable for me to put the template directly into component as then it's all in one place, but is there any drawback of doing so?

第一种方法:

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> 

推荐答案

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

In terms of how the final application will perform, there's no real difference between having an embedded template and an external template.

但是对于开发人员来说，您需要考虑很多差异.

For the developer, however, there are a number of differences that you have to consider.

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

1. You get better code completion and inline support in your editor/IDE in most cases when the HTML is in a separate .html file. (IntelliJ IDEA, at least, supports HTML for inline templates and strings)
2. There is a convenience factor to having code and the associated HTML in the same file. It's easier to see how the two relate to each other.

这两件事对许多人来说都是同等重要的，因此，只要有这一切，您就可以选择自己喜欢的东西并继续生活.

These two things will be of equal value for many people, so you'd just pick your favorite and move ahead with life if this were all there was to it.

但我认为，这导致我们将模板保留在组件中的原因:

But that leads us to the reasons you should keep your templates in your components, in my opinion:

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

1. It is difficult to make use of relative filepaths for external templates as it currently stands in Angular 2.
2. Using non-relative paths for external templates makes your components far less portable, since you need to manage all of the /where/is/my/template type references from the root that change depending on how deep your component is.

这就是为什么我建议您将模板保留在容易找到的组件中.另外，如果您发现内联模板越来越大且笨拙，则可能表明您仍应将组件分解为几个较小的组件.

That's why I would suggest that you keep your templates inside your components where they are easily found. Also, if you find that your inline template is getting large and unwieldy, then it is probably a sign that you should be breaking your component down into several smaller components, anyway.

这篇关于使用组件模板与templateUrl的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！