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

对比方法二:

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屋！