Почему Angular 7 сбрасывает содержимое элемента, с которым манипулируют - PullRequest
Новая
       7

Почему Angular 7 сбрасывает содержимое элемента, с которым манипулируют

0 голосов
/ 25 ноября 2018

Я просто новичок в Angular, поэтому, пожалуйста, будьте "спокойны" со мной.У меня есть общий класс TypeScript для I18n для локализованных изменений (например, текстовое значение элемента) во время выполнения.Я использую его и в других (не Angular) проектах.

Если я включу свой собственный класс для обработки i18n, он соответствующим образом изменит текст, но после этого в angular core он вернется кисходное состояние.Почему Angular делает это.Это не привязка?

Вот код: 

<div *ngFor="let module of modules()" (mouseup)="route(module.key)" class="{{module.i18nKey}}">
  <div><i class="{{module.iconClass}}"></i></div>
  <div attr.data-i18n-key="{{module.i18nKey}}" data-i18n-module="module">!!!localize this!!!</div>
</div>

Я запутался.Библиотека i18n добавляет атрибут с именем data-i18n-translation и устанавливает его в значение true, а также устанавливает локализованный текст.После этого Angular сбрасывает переведенное значение в false и устанавливает текст в исходное значение !!! локализуйте это !!!

Почему?Как я могу предотвратить это?Я вообще не меняю attr.data-i18n-key?

Спасибо за любую помощь.

1 Ответ

0 голосов
/ 25 ноября 2018

Это связано с тем, что при включении обнаружения угловых изменений воссоздаются элементы DOM, которые обрабатываются директивой ngForOf, а ваша внешняя библиотека не знала об этом.

Первым решением было быиспользуйте параметр trackBy для вашей директивы ngForOf, это предотвратит повторное воссоздание DOM-элементов angular, если только значение, возвращаемое функцией, не изменится.

Шаблон: 

<div *ngFor="let module of modules(); trackBy: trackByKey">
</div>

Компонент:

...
public trackByKey(index: number, value: any)
{
  return value.i18nKey
}
...

Другим решением было бы перезапустить внешний синтаксический анализатор i18n, если для вашего компонента запущено обнаружение изменений.

...