Javascript 与用户创建的内容进行数据绑定/交互

我的最终目标是让用户创建的HTML（从数据库中）能够在角度SPA中导航。从后端显示HTML的简单方法是使用某个元素的绑定到

innerHTML

。当使用

JitCompilerFactory

加载运行时编译器的锚定标记

和自定义修饰符来保留组件和模块元数据，以便使用用户创建的内容作为模板JIT编译组件时，就会出现问题。然而，对于构建优化器，这需要。这样，您就无法获得AOT的所有大小优势，因为您仍然需要加载JIT编译器，如前所述--
而且这似乎有风险，因为编译器会受到内部更改的影响。它适用于@angular/compiler@4.4.5但可能不适用于其他版本。”

（DOM操作）

在用户创建的内容
中保留适当的HTML，然后找到每个锚定标记并覆盖click事件。这种DOM管理在角度上似乎非常不受鼓励

（自定义窗口事件）

用户创建的内容看起来像

实现此功能的正确方法是什么

编辑更新：

我接受一个答案作为“最佳”选项，但如果有人发现或他们发布了一个“角度”的方式来做这件事，请添加一个答案
 我也遇到了同样的问题，通过创建自定义指令并在每次单击时检查目标是否是锚元素，向动态内容的容器中添加一个
click
-listener，解决了这个问题。如果它是一个锚元素，阻止默认行为并采用
href
-属性，则将其用作
路由器.navigateByUrl
的url

private onClick(e: any) {
    let link = this.checkForParentLink(e.target as HTMLElement);
    if(link && link.getAttribute('href')) {
      let href = link.getAttribute('href');
      let isMailOrPhone = href.startsWith('mailto:') || href.startsWith('tel:');
      if(isMailOrPhone) return;
      e.preventDefault();
      if(link.getAttribute('target') === '_blank') {     
        let win = window.open(href, '_blank');
        win && win.focus();
      } else {
        this.router.navigateByUrl(href);
      }
    }
  }

  private checkForParentLink(element: HTMLElement): HTMLLinkElement {
    if(!element) return;
    if(element.tagName === 'A') {
      return element as HTMLLinkElement;
    // this.element.nativeElement is in this case the container element
    }
    if(element.parentNode === this.element.nativeElement) {
      return null;
    }
    return this.checkForParentLink(element.parentNode as HTMLElement);
  }

让角度“东西”在动态添加的内容中工作的唯一方法是在运行时编译组件并动态添加该组件。您可以始终使用命令式方法（JavaScript）访问和修改DOM，并添加/删除事件处理程序。@GünterZöchbauer是的，这是我的解决方案1。但这需要“黑客”进行修改，以便与AOT和构建优化器一起工作。在链接到这里的地方找到了这个，从而找到了一个可能的解决方案@t强调我提到的“少角度方式”是我的解决方案#2。使用ComponentFactoryResolver，它要求组件已经存在（被编译）。ngComponentOutlet解决方案仅解决如何将组件添加到视图中的问题。