Html 具有动态内容的Angular 4容器元素-AOT友好

我有一个后端数据库，包含html格式的帮助手册主题，包括带有点击功能的锚。我的Angular（4.3.5）应用程序有一个主题树，当单击一个主题树时，主题的主体html将从后端获取，并显示在容器div中主题树的旁边

我的问题是关于如何在container div中显示html页面。 最初我尝试：

<div [innerHtml]="htmlbody | safeHtmlPipe"></div>

此解决方案无法完全工作，因为htmlbody包含指向其他页面的锚，如下所示：

<a (click)="loadNewPage(topicId)">display topic</a>

。
我还研究了包装器组件，如中所示。但是找不到任何实际的工作代码示例，这些代码专门提供从动态源（后端除外）加载html的功能。
我想使用新的ngComponentOutlet指令并使其与AoT兼容

有人知道如何做到这一点吗
 由于没有人回答这个问题，这里有一个可行的解决方案，尽管它不是理想的解决方案，但它确实非常有效。并且是AOT兼容的

模板：

<div id="pagecontainer" [innerHtml]="htmlbody | safeHtmlPipe"></div>

为了完整起见，safeHtml管道：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

// Ref: https://stackoverflow.com/questions/39794588/angular2-innerhtml-removes-styling

@Pipe({
  name: 'safeHtmlPipe'
})

export class safeHtmlPipe implements PipeTransform {

  constructor(private sanitizer:DomSanitizer){}

  transform(html) {         
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

// Ref: https://stackoverflow.com/questions/39794588/angular2-innerhtml-removes-styling

@Pipe({
  name: 'safeHtmlPipe'
})

export class safeHtmlPipe implements PipeTransform {

  constructor(private sanitizer:DomSanitizer){}

  transform(html) {         
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}