问题标签 [angular-dynamic-components]

背景

我从服务器接收客户端生成的数据，其中包含 HTML，然后我使用这些数据创建一个动态组件，该组件被注入并显示在我们的客户端中。我收到的 HTML 可以包含我需要通过 Angular Reactive Forms 绑定到的一个或多个输入。

尝试1：

我试图通过简单地使用该[innerHTML]属性并创建动态响应式表单来绑定到输入来解决这个要求。但是，由于使用 innerHTML 属性的技术限制，该方法失败了。一旦 HTML 在浏览器中呈现，所有属性都被强制为小写文本，因此任何 Angular 指令或属性都会失败。例如*ngIf, *ngFor, [formGroup], formControlName，等等...... Angular 几乎对所有内容都使用 camelCase，因此一旦它被迫将文本小写，它就会被忽略，这种方法不再是一个可行的解决方案。

尝试2：

这一次，我尝试利用 Angulars NgTemplateOutlet 将 HTML 动态添加到组件中，然后创建并绑定到响应式表单。起初这似乎是一个很好的解决方案，但最终为了让 html 呈现它需要使用[innerHTML]属性，再次使该方法无用（如我第一次尝试中所述）。

尝试 3：

最后我发现了动态组件，这个解决方案正在部分工作。我现在可以成功创建一个格式良好的 Angular HTML 模板，该模板可以在浏览器中正确呈现。然而，这只解决了我一半的要求。此时 HTML 按预期显示，但我无法创建响应式表单并绑定到输入。

问题

我现在有一个动态组件，它生成包含我需要通过创建响应式表单绑定到的输入的 HTML。

尝试4：

这次尝试我将所有用于创建响应式表单的逻辑都放在了创建的动态组件中。

通过使用此方法，显示动态组件 HTML，但出现新错误：

“错误错误：formGroup 需要一个 FormGroup 实例。请传入一个。”

StackBlitz 错误场景

我用这样的实例创建了一个动态组件，组件的名称是dynamicComponent1：

像这样的课程：

让我们假设这些数据有一个 ID。所以我尝试在下一个组件中扩展数据类并且是 DynamicComponent1 的一个实例。这个组件也创建了动态组件。我尝试从this.data更改实例ID。然后它的改变不是 instance.data.id 而是完整的数据被改变。

来自 DynamicComponent2 的代码：

@ViewChildren() 多个是 ViewContainerRef 的 QueryList

所以我们假设 data 的长度为 2 并且 data.id 是 {list,test} 并且倍数长度太 2

所以我的问题是，如何在不更改完整 data.id 的情况下更改此 instance.data.id？为什么 cmpRef.instance 在我初始化它们之前就已经知道 instance.data.id 了？我不知道为什么，它的行为如此令人毛骨悚然。我真的希望你能帮助我，我真的完成了。抱歉这段代码，我无法发送原始代码，所以我必须重写它。

如果您需要更多，我会尽力解释得更好。

我在尝试什么？

1. 交接服务
2. 创建一个具有 data.id 的 const
3. 尝试在 instance.data.id 之后更改 data.id

我创建了一个动态弹出窗口，当我将鼠标悬停在跨度（或按钮）上时出现，但当我离开该跨度时消失。当我将鼠标悬停在它上面时，我无法弄清楚如何保持该弹出窗口的显示。我想一定是一些简单的解决方案（希望有任何帮助。

这是应用程序的链接 https://stackblitz.com/edit/angular-khoagq

我想创建一个由 JSON 配置的完全动态页面组成的应用程序。

我选择 ngx-formly 来创建动态表单，它运行良好，但我不知道如何向前迈出一步并动态创建屏幕，同时能够添加动态模板并将表单配置传递给它。可能吗？我感谢每一个帮助、建议或代码示例。

目标：

1. 完全从 JSON 配置构建应用程序。AppComponent 在初始化时获取 JSON 配置，使用给定的组件类型、模板和数据构建屏幕组件，将它们添加到路由器配置，并显示主页。

2. 不会失去 AOT

简化配置：

[ BaseScreen ] 为其模板提供基本逻辑和数据，即标题、日志记录、服务（智能组合，无模板）

[ BaseFormScreen ] 扩展 BaseScreen，从输入 json 构建动态表单，并添加提交功能

[ HomeScreenLayoutComponent ] 纯模板组件将在页面上呈现导航按钮，每个屏幕一个，

[ FormScreenLayoutComponent ] 纯模板组件呈现标题、动态表单、提交按钮，并添加“主页”按钮

我在 Angular v6 中使用compileModuleAndAllComponentsAsync 的 Angular 编译器创建动态组件，下面的代码相同。

一切正常，但是在导入任何共享模块或自定义模块时出现错误。

我有一个动态组件，它与 param (:pagename) 一起工作，它是一个动态页面，我有一些自定义页面存储在管理门户中，就像我在使用 customReport 访问 URL 时在管理员上有 customReport 页面一样，我调用了 Rest动态组件上的 API 并从包含类似内容的 API 获取响应

result:[{html:Example,component:'这里是组件代码'}];

我想将该 Html 绑定到 dynamiccomponent.html 并注入 customReport.ts 以使用该组件的功能。

如果我使用 AOT 编译，将无法进行动态编译。所以我需要将编译器加载到浏览器中。那么我该如何加载呢？如果我使用

但是，导入后JitCompilerFactory我收到以下错误：

“在“角度/编译器”中找不到导出“JitCompilerFactory”

那么我现在需要从中导入它以'angular/platform-browser-dynamic'进行动态编译吗？

我正在使用 contenteditable div。当用户按下“shift+2”时，我想插入它的组件。在 keydown 我正在创建这样的动态组件：

这是将dom元素插入carret位置的功能。

然后我想通过保存的引用来更新这个组件：

但这不起作用。dom 中的组件没有更新。以后可以动态更新吗？我可以在创建过程中设置@Input 属性addComponent，但是以后如何更新呢？

我在 Angular6 应用程序之外有一个 JSON 文件，我想在运行时读取该 JSON 文件并在我的应用程序中附加组件。

就像我得到

请建议，无论如何在Angular6中我都可以实现那种类型的动态组件加载器。

我目前正在开发一个应用程序，它使用角垫表显示一个表格。我希望动态添加每个单元格的内容。所以在我的 html 代码中，我在单元格区域中添加了一个锚元素。一般来说，我一直遵循文档中的描述（https://angular.io/guide/dynamic-component-loader）。只是，因为我有多个模板，所以我使用的是 ViewChildren 而不是 ViewChild。所以我必须订阅 ViewChildren 的查询列表，以便在添加后得到通知。初始化列表后，我想动态加载我实际想要的组件。如https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4中所述这会导致 ExpressionChangedAfterItHasBeenCheckedErrorerror，因为我在订阅调用中更明确地将组件加载到 on change 挂钩中。我可以使用文章中描述的解决方法来解决这个问题，比如调用detectChanges()，但这并不能解决一般设置的问题，这让我感觉不对。有没有预期的方法来处理这个问题？我用我想要实现的简化版本创建了这个 stackblitz https://stackblitz.com/edit/angular-gitter-mc3xdi。它的构建类似于文档https://stackblitz.com/angular/eaaeaqnnaqxg的示例