2

我有一个简单的组件

@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

4

1 回答 1

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;
    }
  }
}
于 2018-10-25T04:29:40.557 回答