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

Question

Angular2:

我正在尝试修改innerHTML已应用自定义指令的标记的内容/ .

前言:

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

我尝试了什么:

我有这样的指示:

@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.由于您不需要,您只需删除*并使用Renderer修改内容即可.这是一个没有翻译的工作示例.