angular - 如何将包含指令的 HTML 动态插入到 Angular 2 模板中？

Question

我对 Angular 还很陌生，所以请耐心等待。

我想将 HTML 动态插入页面并将其视为包含组件/指令/等的 Angular 模板。

作为一个人为的例子，假设我有我的主要应用程序组件 HTML：

<div #pageContent></div>

我有我的应用组件 TS：

import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  @ViewChild('pageContent') pageContent: ElementRef;

  ngOnInit() {
    this.pageContent.nativeElement.innerHTML = `
      <h1>Test HTML</h1>
      <a routerLink="/test">Test</a>
      <p>Regular paragraph text</p>
    `;
  }
}

这只是一个示例，但在我的实际应用程序中，HTML 将在运行时由服务加载，而不是像上面那样硬编码，因此在编译时将不知道要插入的 HTML。

此示例使用纯 HTML 呈现页面，并且锚标记不用作 AngularRouterLink组件。

我知道 Angular 故意不附带编译器以节省下载大小，所以我不能只说“解析这个 HTML”并让它为我完成所有的工作。

而且我知道动态插入 HTML 存在风险，但让我们假设无论如何我都有充分的理由这样做，并且我有其他保护措施来防止插入恶意 HTML。

我想知道，例如，我是否可以手动查找传入 HTML 中的任何锚标记，手动创建一个RouterLink实例并在呈现的 HTML 中替换它来代替旧的、不起作用的锚标记。

我也希望能够对自定义组件做同样的事情，而不仅仅是RouterLink.

我完全愿意就如何实现这一点提出建议——以上只是我对它如何工作的最佳猜测。

我能找到的唯一例子是 Angular 1.x，但我使用的是 Angular 8。

谢谢

标签： angular