Question

我只是Angular的新手，所以请对我“轻松”。我在I18n上有一个通用的TypeScript类，用于在运行时进行本地化更改（例如，元素上的文本值）。我也在其他（非Angular）项目中使用它。

如果我包括自己的用于处理i18n的类，它将相应地更改文本，但是在此之后，在角核中它将把它更改回原始状态。为什么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-translated的属性，并将其设置为true，并设置了本地化文本。之后，Angular将转换后的值重置为false并将文本设置为原始值!!!本地化！

为什么？我该如何预防？我根本没有更改attr.data-i18n键吗？

感谢您的帮助。

Answer 1

这是因为当进行角度更改检测时，它会重新创建由ngForOf指令处理的DOM元素，而您的外部库对此一无所知。

第一个解决方案是为trackBy指令使用ngForOf选项，除非函数返回的值发生更改，否则这将阻止angular重新创建DOM元素。

模板：

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

组件：

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

另一种解决方案是，如果对组件运行更改检测，则重新运行外部i18n解析器。

Angular 7为什么会重置操作元素文本内容

1 个答案: