Question

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

例如，如果我有：

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

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

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来检查组件，否则我认为这对我没有帮助。

Answer 1

我认为这是不可能的。

有一个有趣的SO post here，它讨论了在Angular生命周期中何时调用constructor。

有趣的部分：

Angular开始引导应用程序...它首先为每个组件创建类。因此，它将调用MyAppComponent构造函数。

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

在Angular中，有没有一种方法可以将包含组件指令的html注入父组件的模板中？

1 个答案: