使用(单击)函数动态显示包含HTML的元素Angular 2

Question

我有一个包含节点的递归树结构,每个节点都有一个'htmlStringContent'属性.当我使用嵌套的'node'组件显示树并尝试呈现我使用的html内容时:

<div [innerHtml]="node.htmlStringContent"></div>

HTML正确显示但对于以下元素:

<a (click)="function()">click me</a>

(单击)功能不起作用.我知道这已经发布了,但是最近我发现了大量的更新,我无法找到任何解决方案.这个答案让我相信我应该使用ngComponentOutlet指令,但我不知道如何...

如何获得角度来绑定此点击功能？

编辑:我被告知使用ComponentFactoryResolver,但无法看到我如何使用它来正确显示HTML.有人能提供进一步的帮助吗

Edit2:我在[innerHtml]上显示之前通过清理管道解析'htmlStringContent'

transform(v: string) : SafeHtml {
  return this._sanitizer.bypassSecurityTrustHtml(v); 
} 

编辑3:基本上这个问题是询问是否尽可能在角度2 /离子2中的对象上显示HTML,同时在其上保留(点击)功能.我也愿意接受解决方法.

Answer 1

CFR 演示： https://plnkr.co/edit/jKEaDz1JVFoAw0YfOXEU ?p=preview

@Component({
  selector: 'my-app',
  template: `

     <button (click)="addComponents()">Add HTML (dynamically using CRF)</button>

     <h1>Angular2 AppComponent</h1>
     <hr>

     <div>
     <h5>dynamic html goes here</h5>
      <div class="container">
        <template #subContainer1></template>
      </div>
     </div>


  `,

})
export class App {
    name:string;
    @ViewChild('subContainer1', {read: ViewContainerRef}) subContainer1: ViewContainerRef;

    constructor(
      private compFactoryResolver: ComponentFactoryResolver
      ) {
      this.name = 'Angular2'
    }

    addComponents() {

      let compFactory: ComponentFactory;

      compFactory = this.compFactoryResolver.resolveComponentFactory(Part1Component);
      this.subContainer1.createComponent(compFactory);

    }
  }