Question

Angular2：

我尝试修改已应用自定义指令的代码的内容/ innerHTML。

前言：

我正在尝试为我的项目设计一个翻译功能，该功能从数据库中提取数据，将其加载到本地对象并更新所有翻译的对象值。首先我尝试使用管道，但除非管道不纯（性能下降） - 我无法在新翻译到达时更新值（类似于this question）。下一步是该指令，尽管它在代码中具有更大的占用空间。

我尝试了什么：

我有这样的指示：

@Directive({
    selector: '[i18n]'
})
export class I18nDirective
{
    @Input() set i18n(key: string) {
        this.el.nativeElement.innerHTML = Translations.get(key);
        this.viewContainer.element.nativeElement.innerHTML = Translations.get(key);
        this.templateRef.elementRef.nativeElement.innerHTML = Translations.get(key);
        this.renderer.setElementProperty(this.el.nativeElement, 'innerHTML', Translations.get(key));
        this.renderer.setElementProperty(this.viewContainer.element.nativeElement, 'innerHTML', Translations.get(key));
        this.renderer.setElementProperty(this.templateRef.elementRef.nativeElement, 'innerHTML', Translations.get(key));

        this.viewContainer.createEmbeddedView(this.templateRef);
    }

    public constructor(
        private el: ElementRef,
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef,
        private renderer: Renderer,
    ) { }
}

我已经在指令下尝试了以上所有设置变量的设置，但没有任何成功。

这是标签：

<span class="..." *i18n="'translation-page-title'"></span>

如何动态更改包含该指令的标签的innerHTML？并且可能在语言改变时动态地改变它？

提前致谢！

Answer 1

在指令之前使用*时，它会使用<template>...</template>自动将开头和结束标签之间的内容包装起来。这些标签从浏览器中转义，这使您能够修改内容。然后使用TemplateRef将其注入指令并使用createEmbeddedView进行修改。由于您不需要，您只需删除*并使用渲染器修改内容即可。这是working example没有翻译。

Answer 2

首先，我假设Translations.get(key)是异步的，可能是Promise，Observable或需要回调的内容。它是否正确？如果是这样，您可能需要等待它返回数据：

Translations.get(key).then(function(data) {
  el.nativeElement.innerHTML;
});

还尝试删除HTML代码中的星号：

<span i18n="'translation-page-title'"></span>

Angular2：如何使用自定义指令修改元素的内容？

2 个答案: