W3C HTML验证器中的Angular2语法 [英] Angular2 syntax in W3C HTML Validator

问题描述

Angular 1.x允许将元素放入HTML中，但 W3C HTML验证器不为人知。 。解决方法是添加 data - 前缀并写入 data-ng-repeat 而不是 ng-repeat 。

<在当前的Angular 2版本中，我们有不同的语法。该语法也是区分大小写的，例如我们必须使用 ngClass ，而不是 ngclass 。

Angular2中使用的所有括号都会导致HTML验证错误。幸运的是，还有一个规范形式，所以我们可以使用 on-event 来代替（event），而不是 [property] 我们可以使用 bind-property 而不是 [（ngModel）] 我们可以使用 bindon-ngModel 。所有这些都可以用 data - 前缀。

但是像 * ngFor ， * ngIf 和 * ngSwitch ？模板变量 #variable 是什么？你知道任何解决方法，以使Angular 2的模板在W3C Validator中具有有效的HTML吗？

使用规范形式。 * 用于结构指令，可用于< template> 标签。使用 * 模板是隐含的，但您始终可以使用显式模板标记，并使用上面列出的绑定的标准形式。

请参阅 *和< template>

Angular 1.x allowed to put elements in HTML, which were not known for W3C HTML Validator. Workaround for this was to add data- prefix and write e.g. data-ng-repeat instead of ng-repeat.

In the current Angular 2 version we have a different syntax. This syntax is also case-sensitive, e.g. we have to use ngClass, not ngclass.

All brackets used in Angular2 are causing HTML validation errors. Fortunately there is also a canonical form, so instead of (event) we can go with on-event, instead of [property] we can go with bind-property and instead of [(ngModel)] we can use bindon-ngModel. All those things work with data- prefix.

But what with directives like *ngFor, *ngIf and *ngSwitch? What with template variables #variable? Do you know any workaround in order to make Angular 2 template with those things a valid HTML in W3C Validator?

解决方案

You have to use the canonical form. The * is for structural directives which can be used with the <template> tag. With * the template is implicit, but you can always use an explicit template tag instead and with this the canonical forms of the bindings you listed above.

See * and <template> in https://angular.io/docs/ts/latest/guide/template-syntax.html

这篇关于W3C HTML验证器中的Angular2语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！