translate directive, continuously updating value

[anvilvapre]

The DOM content of HTML elements that use the translate directive are continuously updated. The textContent of the elements are set each Angular update/continuously.

How to reproduce:

1. Using the translate directive using the following example <a translate>ABC</a>
2. Scenario A: If 'ABC' is not available as a translation in the translation service - the text value of the 'a' element is continuously updated. The translation is looked up each update.
3. Scenario B: Even if 'ABC" is available as translation - the text value of the 'a' is continuously update/replaced.
4. See Edge(Chrome) devtools. Open Element view. Lookup the elements. Notice the element continuously in purple indicating these elements are updated as DOM nodes.
5. Optionally change the text node of the 'a' element in dev tools. Notice the content is replaced directly after with 'ABC' or the translated value.
6. Scenario C: Additionally the translate directive gives priority to child text nodes as translate key. Even if the key attribute or lookupKey is set on the 'a' element - then still the child text nodes will be used as translation key.

Issue:
a. The checkNodes function in the translate directive gives prio to use the child text nodes as translation key.
b. If any child text node is set then this value will be used as translate key.
c. The node.lastKey is in this case never updated.
d. Because of this the same process will repeat continuously. Resulting in continuous updates of the value and in turn the text content of the native element.
f. Even if 'ABC' is replaced by a translated value i.e. 'def'. It appears that after 'def' is used a second time as lookup key.

Cause:

1. Scenario A: if no translation exists for 'ABC' then node.lastKey will never be set/updated.
2. Scenario B: if 'ABC' translates to 'def', then after the first time 'def' will after be use as translation key.

Impact:

• Continuous and endless updates of the child nodes of elements that use the translate directive (not pipe).
• Performance degradation.

Additionally it seems inefficient to check all child text nodes and translate each individual child nodes - where after only the last translated child text node will be used as translated value.

Related source code:

• core/projects/ngx-translate/core/src/lib/translate.directive.ts

  Line 60 in 5d04bd8

  checkNodes(forceUpdate = false, translations?: any) {

• core/projects/ngx-translate/core/src/lib/translate.directive.ts

  Line 114 in 5d04bd8

  if (res !== key) {