Angular HTML模板定义了页面在web应用程序中的布局方式，HTML模板开发对任何应用程序都至关重要。在CodeMix或MyEclipse中使用Angular HTML模板的支持可实现以下效果：

• 自定义Angular属性内的验证
• 检测错误的角度元素标签
• 自动完成HTML元素
• 自动完成模板中的TypeScript表达式

本文详细介绍Angular HTML模板可提供的功能。

免费下载MyEclipse  优惠购买MyEclipse

---

搭建基础

Angular HTML模板提供了一种结构化的方式，可将Angular组件公开的数据绑定到最终用户。例如，本示例显示了使用特定控件制作下拉日历。与其他任何输入表单控件一样，它可以呈现UI并提供支持逻辑。

<dd-calendar dd-height=”400px” dd-width=”600px”
      [dataset]=”calData.EVENTS”
      (selection)=”onSelection($event)”>
</dd-calendar>

在本例中calData是在当前组件上定义的，并将事件数据传递到dd-calendar小部件中。Angular HTML模板中有多种不同的结构，但最常见的是输入和输出:

• [数据集]-提供绑定到组件的数据。
• （选择）-提供从组件返回到这个类的输出。

除了在组件内部和外部提供信息外，模板还允许在HTML块内使用表达式，例如：

<h1>{{title}}</h1>
<h2>{{subtitle}}</h2>

在这个示例中，标题和副标题的值来自Angular组件。因为这些值是绑定的，所以更新组件内部的标题将立即更新UI中的值。

优惠购买CodeMix CodeMix安装教程

Angular模板的自动验证
当使用Angular HTML模板时，Angular IDE将在开发过程中提供对模板的自动验证。保存后，Angular IDE会确认模板的语法和语义完整性，并在编辑器中显示检测到的所有文件。此外，Angular IDE将对项目中的所有文件提供此验证，以帮助检测尚未在编辑器或运行时看到的问题。
验证有多种类型，但分为两大类。语法和语义验证如下所述。验证是在嵌入式模板和外部模板上执行的。
语法验证
语法验证的核心职责是检查正在开发的模板的完整性。Angular IDE将检测缺少的结构元素，例如缺少的</div>标记，并验证自定义<app-style元素具有预期的输入或输出字段。语法验证甚至可以确认指令为Angular启用的扩展结构提供了必要的自定义标签。

经过语法验证的结构的完整列表包括：

• 错误的HTML结构和语法
• 使用的未知标签或组件
• 未知的输入/输出绑定或属性
• 无效的表达式语法

语义验证
语义验证的职责是解释HTML模板文件中的表达式和其他复杂结构。表达式是功能良好的模板的关键，提供了从for循环到动态绑定的所有功能。

开发Angular HTML模板时最常见的错误包括暴露和使用的字段之间的不一致，以及表达式中的错别字。通过针对相应的TypeScript类验证表达式和代码结构，语义验证有助于快速检测这些问题。
经过语义验证的完整代码块列表包括：

• 在{{}}块内使用的表达式
• 在ngFor等属性中使用的语义结构
• 绑定表达式

除了模板验证外，语义验证还将确保内联和独立HTML模板的完整性，并检查使用模板的@Component声明的一致性。
在@Component注释上检测到错误
1、模板和templateUrl属性验证：

• 缺少通过templateUrl引用的文件
• 模板和templateUrl属性同时存在或都不存在
• 不鼓励使用绝对模板路径
• 如果模板属性包含现有文件名，建议将模板属性更改为templateUrl

2、组件存在于多个模块中或不存在于任何模块中

@Component声明的语义验证不仅有助于确保正在开发的模板定义良好，还有助于确保相应的TypeScript组件在运行时正确使用模板。

Angular HTML模板的代码补全功能
除验证外，Angular IDE还在Angular HTML模板中包含了代码补全功能。

---

标签：