Question

我正在开发一个项目，其中后端API为每个视图都有两个端点： - 以JSON格式向我发送视图结构的一个 - 向我发送数据的一个数据，用于填充从格式生成的视图。

我有一个指令，它直接根据JSON格式生成html标签。这是指令：

import { Directive, Input, ViewContainerRef, ElementRef, AfterViewChecked, TemplateRef } from '@angular/core';

@Directive({
  selector: '[dynamicTag]'
})
export class DynamicTagDirective implements AfterViewChecked {
  constructor(
    private templateRef: TemplateRef<any>,
    private vcf: ViewContainerRef
  ) { }
  private _tag: string;
  private _needUpdate: boolean = false;

  @Input('dynamicTag')
  set tag(t: string) {
    this._tag = t;
    this._needUpdate = true;
    this.vcf.clear();
    let template = this.templateRef.elementRef.nativeElement.nextElementSibling;
    if (template) {

  this.templateRef.elementRef.nativeElement.parentNode.removeChild(template);
    }
    this.vcf.createEmbeddedView(this.templateRef);
  }

  ngAfterViewChecked() {
    if (this._needUpdate) {
      this.updateTemplate();
      this._needUpdate = false;
    }
  }

  private updateTemplate() {
    let template = this.templateRef.elementRef.nativeElement.nextElementSibling;
    if (template) {
      let r = document.createElement(this._tag);
      r.innerHTML = template.innerHTML;
      console.log(template);
      console.log(template.innerHTML);
          this.templateRef.elementRef.nativeElement.parentNode.replaceChild(r, template);
    }
  }
}

我在这样的模板中使用它：

<span *dynamicTag="row?.attribute">
    <strong class="ml-1">{{ selectedUser?.nom }}</strong> {{ selectedUser?.prenom }}
</span>

structure是视图结构对象，selectedUser是描述用户的对象。

我的代码ALMOST有效。正确替换HTML标记，并且在从指令生成的HTML标记中正确地重新呈现属于structure对象的任何静态或动态内容。

但是，如果我使用其他对象来填充视图，则它不起作用。属于它的变量不会被重新渲染。

尽管如此，我对以下例子可以说明的事情感到困惑。

注意指令的updateTemplate()方法中的2 console.log（）。

第一个输出THE SELECTED USER'S NAME THE SELECTED USER'S FIRST NAME（对象）。

然而，第二个输出（html）。

但仅当模板变量属于不是structure的对象时。

为什么？我怎么能实现我想要的呢？是否可以使用Angular？

如何从innerHTML获取Angular中的模板变量

0 个答案: