时间戳

首页 > 解决方案 > 在 Angular 中有没有办法将包含组件指令的 html 注入到父组件的模板中？

angular - 在 Angular 中有没有办法将包含组件指令的 html 注入到父组件的模板中？

问题描述

我想在我的数据库中包含包含组件指令的 html，然后将其用作 Angular 中组件模板的一部分。

例如，如果我有：

<div [innerHTML]="injectMe"></div>

在 App 组件模板中，这在应用程序组件的代码中：

export class AppComponent  {
  injectMe = "<p>Paragraph</p> <app-injected></app-injected> ";
}

然后创建一个名为注入的组件：

模板：

<p> injected works! </p>

代码：

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

  constructor() { }

  ngOnInit() {
  }

}

我在控制台中收到“清理 HTML 删除了一些内容”的警告。在该链之后，我尝试添加一个调用以将字符串标记为安全使用：this.sanitizer.bypassSecurityTrustHtml

export class AppComponent  {
  injectHtml = "<p>Paragraph</p> <app-injected></app-injected> ";
  injectMe: any;

  constructor(private sanitizer: DomSanitizer){
    this.injectMe = this.sanitizer.bypassSecurityTrustHtml(this.injectHtml);
  }
}

这导致指令标签留在 HTML 中，没有控制台警告关于清理删除任何内容，但组件似乎没有被 Angular 处理。我看到您可以使用组件工厂来动态创建组件，但是，除非我想手动解析 HTML 以检查组件，否则我认为这对我的情况没有帮助。

标签： angulartypescriptdynamicangular-dom-sanitizer

解决方案

我不相信这是可能的。

这里有一篇有趣的SO 帖子，它讨论了constructor在 Angular 生命周期中何时调用 。

有趣的部分：

Angular 开始引导应用程序……它首先为每个组件创建类。所以它调用 MyAppComponent 构造函数。

即Angular解析html中的html以找出它需要实例化的打字稿组件。这意味着您不能注入 html 并期望 Angular 将其包含在引导过程中，因为它已经错过了机会。

推荐阅读