Html 角度动态元件的自定义标记名称

我有一个简单的组件

@Component({
  selector: '[my-component]',
  template: `<i>1</i><p>content</p><b>2</b>`
})
export class MyComponent {
  public tagName: string;
}

AppComponent

的模板只是

<template #myContainer></template>

---

?<代码>标记名可以是任何允许的HTML标记，并且ngIf/Switch不是选项。我已经为快速跳转创建了演示：

用于Problem1，使用字符串regex将“p”替换为“span”标记。它应该在ngAfterViewInit生命周期方法中完成

import { Component, OnInit, AfterViewInit, ElementRef } from '@angular/core';

@Component({
  selector: '[my-component]',
  template: `<i>1</i><p>content</p><b>2</b>`
})
export class MyComponent implements AfterViewInit, OnInit{
  public tagName: string;

  constructor(private elementref: ElementRef){}

  ngOnInit(){}

  ngAfterViewInit(){
    if(this.tagName && this.elementref){
      let htmlcontent = this.elementref.nativeElement.innerHTML;
      htmlcontent = htmlcontent.replace(/p/g, 'span');
      this.elementref.nativeElement.innerHTML = htmlcontent;
    }
  }
}

从'@angular/core'导入{Component，OnInit，AfterViewInit，ElementRef}；
@组成部分({
选择器：“[my component]”，
模板：`1content
2`
})
导出类MyComponent实现AfterViewInit、OnInit{
公共标记名：字符串；
构造函数（私有elementref:elementref）{}
ngOnInit（）{}
ngAfterViewInit（）{
if（this.tagName&&this.elementref）{
让htmlcontent=this.elementref.nativeElement.innerHTML；
htmlcontent=htmlcontent.replace（/p/g，'span'）；
this.elementref.nativeElement.innerHTML=htmlcontent；
}
}
}

<div my-component><i>1</i><p>content</p><b>2</b></div>

<span my-component><i>1</i><span>content</span><b>2</b></span>

import { Component, OnInit, AfterViewInit, ElementRef } from '@angular/core';

@Component({
  selector: '[my-component]',
  template: `<i>1</i><p>content</p><b>2</b>`
})
export class MyComponent implements AfterViewInit, OnInit{
  public tagName: string;

  constructor(private elementref: ElementRef){}

  ngOnInit(){}

  ngAfterViewInit(){
    if(this.tagName && this.elementref){
      let htmlcontent = this.elementref.nativeElement.innerHTML;
      htmlcontent = htmlcontent.replace(/p/g, 'span');
      this.elementref.nativeElement.innerHTML = htmlcontent;
    }
  }
}