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在编译时将不知道< / strong>。

此示例使用纯HTML呈现页面，并且anchor标签不能用作Angular RouterLink组件。

我知道Angular并不是为了节省下载大小而随编译器一起提供的，所以我不能只说“解析此HTML”并让它为我完成所有工作。

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

例如，我想知道是否可以在传入的HTML中手动查找任何锚标记，手动创建RouterLink实例并将其替换为呈现的HTML来代替旧的，无法正常运行的HTML锚标签。

我也希望能够对自定义组件执行同样的操作，而不仅仅是RouterLink。

我完全愿意就如何实现这一目标提出建议-以上只是我对它可能如何工作的最好猜测。

我只能找到有关Angular 1.x的此类示例，但我使用的是Angular 8。

谢谢

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

0 个答案: