问题标签 [angular-dynamic-components]

我正在尝试在任何容器内构建一个动态组件。我需要在动态创建的组件内的角度世界中提供一些预定义的服务和注入。造成这种情况的主要原因是有一个外部服务负责组件的外观，但需要在客户端的组件上执行其他操作。

private elementRef：用于注入的动态组件的构造函数中的ElementRef导致问题，它无法为注入提供值。收到错误 - “错误错误：无法解析 Xyz 的所有参数：（？）。”

将参数注入或传递给动态创建的构造函数的最佳方法是什么？

我使用 Angular CLI 创建了“库”类型的项目。

在里面，我有组件 MyComponent ，里面有以下构造函数：

MyComponent 在其模块中注册（声明和导出）。该模块还导入“CommonModule”。

但是，一旦我尝试在另一个应用程序中使用这个库（内置版本），我会得到以下信息：

我试过这个但没有帮助：Angular 6 custom lib No provider for ComponentFactoryResolver

版本

角 CLI：8.3.10

节点：10.14.2

操作系统：达尔文 x64

角度：8.2.11

目前FormGroupDirective.directives仅显示NgControl指令扩展，按照如何将 a 附加到动态创建的组件的SOF 答案实现。FormControlName

记录时，我得到一个包含所有sthis.parent.formDirective.directives的数组DynamicPanelDirectiveFormGroupDirective

这是伟大的。

下一步是扩展NgModelGroup以将其附加formGroupName到动态创建的组，然后将控件附加到它们的托管组

我遵循了这个模式，也得到了这个 github 问题贡献的帮助，并扩展NgModelGroup到了另一个指令 -DynamicGroupDirective

现在每个控件都分配给其适当的组主机

DynamicGroupDirective问题是，我在this.parent.formDirective.directives数组中看不到任何东西，只有DynamicPanelDirectives。

我注意到由于这个附加指令被附加：

而且我知道我必须使用中的匹配功能DynamicGroupDirective，即

但是我不明白我需要分配什么，因为它本身并没有添加到指令数组中，并且我不能分配给this.control它被标记readonly

用例是DynamicGroupDirective使用config.breadcrumbs帮助将其附加到组的正确方法，但我还需要将动态组件本身呈现在其适当的组中ViewContainerRef

所以也许有人有更好的建议。谢谢你读到这里的任何人

在我的角度应用程序中，我正在处理许多在运行时动态呈现的组件，但我必须在编译之前指定组件以在运行时注入它，是否可以通过其名称作为字符串加载组件...说...我有两个组件FirstComponent并且 SecondComponent我可以将它们的名称存储在一个数组中，并且它们通过用户操作决定要呈现哪个组件，并且它不想在名称上使用 if 条件或类似的东西。我想要一些通用的东西，以防我更改数组或向数组中添加新组件，我不想更改编写的代码。非常感谢...我正在使用ng-dynamic-component向页面添加动态组件，如果有办法让这个库实现它。

我的项目中有相当复杂的基础设施，其中包含

• 主机组件
• 宿主组件模板 (MyDir) 中使用的结构指令
• 结构指令中使用的另一个组件（MyComp）

简化版如下所示。

主机组件

结构性指令

结构指令的组成部分

输出是

自定义 td
项目 1
项目 2

这很好，除了标记是

问题

我想<div my-comp>从结果视图中删除中间值，或者至少将其替换为<tbody>. 要查看我准备的Stackblitz DEMO的全貌，希望它会有所帮助......另外，很明显这个例子是人为的，但这就是我试图用最少的代码重现问题的目的。所以这个问题应该在给定的基础设施中有一个解决方案。

更新

@AlexG 找到了替换中间层的简单方法div，tbody并且 stackblitz 演示首先显示了一个很好的结果。tbody但是当我尝试将它应用到本地项目时，我遇到了新问题：浏览器在表格的动态内容准备好呈现之前自行安排，这导致tbody最终视图中有两个嵌套，这似乎与 html 规范不一致

Stackblitz 演示没有这样的问题，只有tbody my-comp存在。但在我的本地开发环境中，完全相同的项目确实如此。所以我仍在努力寻找如何移除中间my-comp容器的方法。

更新 2

该演示已根据@markdBC 建议的解决方案进行了更新。

我正在寻找一种动态加载角度分量的方法。组件名称应存储在 json 文件中，服务应根据 json 文件中的名称加载组件。第二步应该是将渲染组件的 html 存储到 div innerHTML 中。我已经在使用常规的 HTML 页面进行操作了。

我有一个可以在单击按钮时导入的通用组件。

在该组件中有一些常见的 HTML：Stackblitz

当我单击按钮时，它会引发以下错误：

错误：无法读取未定义的属性“createComponent”

app.component.html：

app.component.ts：

新的tile.component.html：

我正在尝试使用角度材料将组件（动态创建）附加到各个选项卡，@viewChild但只有当我单击第二个选项卡中的按钮时，它才会进入第一个选项卡。

这是Stackblitz - angular-append-component-to-respective-tabs

它没有显示在单个选项卡中。我有 3 个标签。所有 3 个选项卡都包含Add按钮，当我单击第一个选项卡的按钮时，它会在第一个选项卡中添加该组件，但是当我单击第二个选项卡的Add按钮时，它只会在第一个选项卡中添加该组件，它应该添加到第二个选项卡中。

有人可以帮我弄清楚如何做到这一点吗？

我在 Angular 6 中使用 componentFactoryResolver 创建了一个动态组件，我需要每 3 秒更新一次它的属性。

该属性没有得到更新。我发现动态生成的组件不支持属性绑定。那么，如何使用新数据更新属性？有什么解决方法吗？

我有一个带有一些不同类型小部件的仪表板。我使用 ng-dynamic-component 来渲染它们。

编辑：

这是我的问题：当我尝试从我的小部件（通过实例或 EventEmitter）获取任何数据时，生命周期会重新启动，这是我从小部件收集数据的方式：

然后小部件“重新加载”，生命周期从零（构造函数，onInit，...）重新启动，这不是我想要的。为什么仅通过访问数据重新启动所有这些过程？我试过它是一样的Output() EventEmitter

这是我获取 Widget 组件的方法：

在 HTML 中：

如何在不触发 angular 的任何生命周期钩子的情况下访问我孩子的数据？

---------------