Имя пользовательского тега для углового динамического компонента

Question

У меня есть простой компонент

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

И еще один, который создает первый экземпляр:

export class AppComponent implements OnInit {
 @ViewChild("myContainer", { read: ViewContainerRef }) container;

  constructor(
      private viewContainer: ViewContainerRef,
      private resolver: ComponentFactoryResolver) {
  }

  ngOnInit() {
    this.container.clear();
    const compFactory = this.resolver.resolveComponentFactory(MyComponent);
    const componentRef = this.container.createComponent(compFactory);
    componentRef.instance.tagName = 'span';
  }
}

Шаблон AppComponent просто

<template #myContainer></template>

, то есть вывод

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

Я пытаюсь настроить шаблон MyComponent во время создания экземпляра и заменить его тег p на тег, имя которого должно быть tagName.Я знаю имя тега прямо перед MyComponent созданием при выполнении метода AppComponent.ngOnInit.

И еще одна задача, которую я пытаюсь решить, это MyComponent Настройка имени тега-обертки.Заменив <div my-component>... на <span my-component>..., где «span» - это желаемое имя тега, которое также известно как AppComponent.ngOnInit.

Так что можно обеспечить такую ​​настройку программно и получить следующее:

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

?tagName может быть любым разрешенным тегом HTML, и ngIf / Switch не является опцией.Я создал демо для быстрого погружения: https://stackblitz.com/edit/angular-zngyoa

Answer 1

Для Задачи 1, используйте строковое регулярное выражение, которое заменит '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;
    }
  }
}