Angular 10：如何创建动态组件/html？

Posted 2023-02-23

【中文标题】Angular 10：如何创建动态组件/html？

【英文标题】：Angular 10: how to create dynamic Component / html?

【发布时间】：2020-12-29 21:44:03

【问题描述】：

2 个问题：

<div> someData </div> - 如何让 someData 转成html？ <div> MyComponentClass </div> - 如何让它创建一个组件 MyComponentClass 的实例并将其放入 div 中？

对于问题 1，我想我需要一种方法来访问 DOM 元素，然后自己注入它。 对于问题 2，我不知道，但它会很有用。

【参考方案1】：

问题：

您可以将字符串/html 变量绑定到 [innerHTML] 属性绑定。

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

如果 html 不起作用，您需要注入 DomSanitizer 来告诉 Angular html 是安全的。

 constructor(private sanitizer:DomSanitizer) 
    this.htmlString = this.sanitizer.bypassSecurityTrustHtml(style);
  

问题：

您可以使用 @ViewChild 动态创建组件，并从您的 div 中获取 ViewContainerRef 并使用 componentFactoryResolver：

模板：

<div #yourdiv></div>

组件：

@ViewChild("yourdiv" , read: ViewContainerRef) private vcr: ViewContainerRef;
   
constructor(private componentFactoryResolver: ComponentFactoryResolver) 

    let resolver = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    let componentFactory =  this.vcr.createComponent(resolver);
  
  

【讨论】：

谢谢。 1 容易理解。 2 我真的不明白那里发生了什么。我想做的只是模拟你可以在 React 中轻松做的事情：将子组件放入自定义组件中：。如果它这么复杂，那么我将使用将所有选项放在一个组件+参数中的丑陋方式来选择正确的选项。有限，但这是 Angular。

您想通过单击按钮动态创建组件，还是只想以“正常”方式添加组件？您始终可以使用模板中的组件标签来创建组件的新实例，例如：。对不起，如果我没有正确理解你，并且角度可能一开始很难，但一旦你进入其中，我不知道我不能做什么。

我知道在我的组件模板中我可以这样做： 工作正常，但我想做：这里有一些代码 other-component> 所以我将能够像在 React 中一样创建 HOC。问题是在 Angular 中我不能将孩子传给孩子。

哦，现在我明白了。 Angular 可以做到这一点。在您的父组件中，您需要使用 标记来告诉 Angular 将您编写的 html 放在其自己的标记中的位置。现在你做这样的事情：// some more html 更多信息，你可以阅读：blog.angular-university.io/angular-ng-content

我会做一个例子并在 8 或 10 小时后发送给你（使用 node js 服务器和 angular 客户端）