Директивы угловых атрибутов и действительный доступный HTML - PullRequest
Новая
       36

Директивы угловых атрибутов и действительный доступный HTML

1 голос
/ 20 июня 2019

Я недавно начал работу над проектом, который требует, чтобы приложение было как можно более доступным, и столкнулся с проблемой, когда HTML-код помечается как недействительный https://validator.w3.org.. Я ничего не видел вдокументация Angular, в которой упоминается валидность HTML (вероятно, по уважительной причине), но я испытываю сильное давление, чтобы заставить ее работать с плавающими цветами.

В те времена, когда я создавал относительно статичные веб-сайты,все пользовательские атрибуты HTML будут иметь префикс data flag 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-рефлекс-фрагмент
  • 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 таким способом, и есть ли какие-либо советы или документация о том, как создать действительный HTML с Angular?

Извините, если этот вопрос был немного длинным!Спасибо заранее, что нашли время, чтобы прочитать его.

...