Angular 如何基于值创建动态标记

我需要创建一个模板，其中本地html标记将根据变量值动态定义

我尝试使用一个自定义指令，用请求的新标记替换最初定义的标记，如所述。尽管该解决方案似乎在一定程度上可行，但它打破了innerHTML内容与组件类的变量和事件绑定。换句话说，组件类变量中的更改不再对呈现的html产生影响

在Vue中，有一种非常简单的实现方法：

<component :is="tagName" class="foo" style="color:red">
  anything inside component
</component>

---

我想知道在这个问题上是否会有类似的解决方案。任何帮助都会很好

为什么不有条件地添加指定的元素呢

<container-element [ngSwitch]="tagName">  
  <elementType1 *ngSwitchCase="tagName1">...</elementType1>
  <elementType2 *ngSwitchCase="tagName2">...</elementType2>
  <elementTypeDefault *ngSwitchDefault>...</elementTypeDefault>
</container-element>

---

请参考下面的链接，可能会对您有所帮助

替换tag.directive.ts

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

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

  @Input('replaceTag')
  set tag(t: string): void {
    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;
      this.templateRef.elementRef.nativeElement.parentNode.replaceChild(r, template);
    }
  }
}

import{Directive，Input，TemplateRef，ViewContainerRef，ElementRef，AfterViewChecked}来自'@angular/core'；
@指示({
选择器：“[replaceTag]”
})
导出类ReplaceTagDirective在查看检查后实现{
建造师(
私有templateRef:templateRef，
专用vcf:ViewContainerRef
) { }
私有标记：字符串；
private _needUpdate:boolean=false；
@输入（'replaceTag'）
集合标记（t:字符串）：无效{
这个。_tag=t；
这是。_needUpdate=true；
this.vcf.clear（）；
让template=this.templateRef.elementRef.nativeElement.nextElementSibling；
如果（模板）{
this.templateRef.elementRef.nativeElement.parentNode.removeChild（模板）；
}
this.vcf.createEmbeddedView（this.templateRef）；
}
ngAfterViewChecked（）{
如果（此.\u需要更新）{
这是。_updateTemplate（）；
这是。_needUpdate=false；
}
}
private_updateTemplate（）{
让template=this.templateRef.elementRef.nativeElement.nextElementSibling；
如果（模板）{
设r=document.createElement（此._标记）；
r、 innerHTML=template.innerHTML；
this.templateRef.elementRef.nativeElement.parentNode.replaceChild（r，template）；
}
}
}

你可以使用

ng template

和

ng template outlet

，据我所知，查看这篇文章ngTemplateOutlet适用于现有ng模板。因为我想包含通用html标记，所以它不能解决我的问题。请参考下面的链接，可能会帮助你参考下面的链接，可能会帮助你已经尝试过了，并且在原始问题中也有相同的链接，其中简要描述了我尝试时遇到的问题。谢谢，但在这种情况下，我需要在模板中包含所有可能的标记，这正是我试图避免的。耶，我面临着一个非常类似的问题。在我的例子中，标签的值在执行之前是未知的。我已经尝试过了，并且在原始问题中也有相同的链接，其中简要描述了我在尝试时遇到的问题。干杯

<elementType1 *ngIf="tagName1_expression">anything inside component</elementType1>
<elementType2 *ngIf="tagName2_expression">anything inside component</elementType2>

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

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

  @Input('replaceTag')
  set tag(t: string): void {
    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;
      this.templateRef.elementRef.nativeElement.parentNode.replaceChild(r, template);
    }
  }
}