Question

我最近开始从事一个项目，该项目要求应用程序尽可能地易于访问，并且遇到一个问题，其中https://validator.w3.org将HTML标记为无效。在Angular文档中我没有看到任何提及HTML有效性的信息（可能是有充分的理由），但是我承受着很大的压力，希望它能以鲜艳的色彩通过。

在我创建相对静态的网站的那一天，所有自定义HTML属性都将以data标志https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes为前缀，以确保任何验证器都可以将它们形象化地忽略掉，但是我不会不会觉得这是正确的方法。

举一个简单的例子，下面我有一个无序列表，该列表输出一些错误，并带有指向页面上相应错误的链接。

<ul>
  <li *ngFor="let error of errors">
    <a
      routerLink="."
      fragment="{{ transformName(error.name) }}-error"
      queryParamsHandling="merge"
    >
      {{ error.message }}
    </a>
  </li>
</ul>

Angular然后输出以下HTML。

<ul>
  <!--bindings={
    "ng-reflect-ng-for-of": "[object Object],[object Object"
  }-->
  <li>
    <a
      queryparamshandling="merge"
      routerlink="."
      ng-reflect-fragment="username-error"
      ng-reflect-query-params-handling="merge"
      ng-reflect-router-link="."
      href="/login#username-error"
    >
      Please enter your username.
    </a>
  </li>
  <li>
    <a
      queryparamshandling="merge"
      routerlink="."
      ng-reflect-fragment="password-error"
      ng-reflect-query-params-handling="merge"
      ng-reflect-router-link="."
      href="/login#password-error"
    >
      Please enter your password.
    </a>
  </li>
  <!--bindings={}--><!--bindings={}-->
</ul>

这显然是无效的HTML，因为以下属性不是a元素的有效属性

queryparamshandling
routerlink
ng-reflect-fragment
ng-reflect-query-params-handling
ng-reflect-router-link

如果我添加了data，则某些Angular属性指令仍然有效，但是其他类似routerLink的指令则抱怨fragment不是属性。

还是我像这样绑定每个属性指令

<ul>
  <li *ngFor="let error of errors">
    <a
      [routerLink]="['.']"
      [fragment]="transformName(error.name)+'-error"
      [queryParamsHandling]="'merge'"
    >
      {{ error.message }}
    </a>
  </li>
</ul>

然后输出哪个更清晰的HTML，但我担心Angular可能会丢失某些内容

<ul>
  <!---->
  <li><a href="/login#username-error"> Please enter your username. </a></li>
  <li><a href="/login#password-error"> Please enter your password. </a></li>
  <!----><!---->
</ul>

所以我想我的问题是：

有人需要以这种方式使用Angular吗？关于如何使用Angular生成有效的HTML有任何技巧或文档吗？

很抱歉，这个问题有点长！预先感谢您抽出宝贵的时间阅读它。

角度属性指令和有效的可访问HTML

0 个答案: