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

Posted 2023-02-23

【中文标题】在 Angular 中有没有办法将包含组件指令的 html 注入到父组件的模板中？

【英文标题】：In Angular is there a way to inject html that contains a component directive into the template of a parent component?

【发布时间】：2020-08-16 06:36:24

【问题描述】：

我想在我的数据库中包含组件指令的 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 以检查组件。

【问题讨论】：

我不认为这是可以做到的。在 Angular 中，必须先编译 html，然后才能在应用程序上使用它。在这种情况下，html 将具有 <app-injected> 标签，但 Angular 不会处理它。您应该采用不同的方法，例如组件工厂

@alexortizl 感谢您的回复。我担心没有办法做到这一点。我以为我最初看到它工作过一次，然后我开始收到消毒警告。所以我必须自己手动解析 HTML，创建组件并插入它们？我想知道如何在组件的 HTML 中保留位置。再次感谢

回到 angularjs 中，我们有 compile 函数使这成为可能，但是 angular 的情况并非如此。也许有一天:)

【参考方案1】：

我不相信这是可能的。

有一个有趣的SO post here 谈到在 Angular 生命周期中何时调用 constructor。

有趣的部分：

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

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