问题标签 [angular-dynamic-components]

我需要根据预先确定的类型动态地创建组件，并且能够从它们中设置和获取数据。到目前为止，我能够创建和显示组件，但我不知道如何设置或从中获取数据。

这就是我添加和显示组件的方式：

app.component.ts：

app.component.html：

string.component.ts：

string.component.html：

动态添加的组件列表结果：

我没有使用 ng-template 来添加组件，因为我能够将它们拖放到父组件的 cdkDropList 容器中。

我想要实现的是在将组件添加到列表之前设置属性“item.type”的值，并且能够在我填充它们的输入后获取每个组件的“item”属性。

设置和获取组件信息的最佳方法是什么？

更新：感谢@kari 的解决方案，我设法解决了我的问题。结果如下：

我试图在单击保存按钮时获取动态添加的组件的值。

这是获取动态添加的组件值

ts：

在这里，我将获得默认添加的值，当我单击Append to tab按钮时，将添加新组件，并且单击save按钮时，所有值都将打印在 ts 文件 ( saveData()) 函数中。

我有一个应用程序，用于MatDialogRef将组件作为对话框打开。

对话框显示一个长文本，但由于某种原因，文本区域滚动到底部。如果它不是动态创建的组件，则不会发生这种情况。

这是一个例子：https ://stackblitz.com/edit/matdialogref-textarea-scroll-issue

我希望有人能解释发生了什么以及如何解决它，所以textarea 留在滚动的顶部。

提前致谢！

有人可以帮助我，如何在 innerHTML 标签中使用 ng-template，

Stackblitz 演示：https ://stackblitz.com/edit/angular-xgnnj4

我想做的是，

在组件 HTML

在组件 TS

我真的需要以这种方式实现，因为我想从 API 获取 HTML 内容并使用该值动态显示 HTML 内容

当我收到错误时，无法读取未定义的属性“createComponent”，但如果我把它放在innerHTML之外，它可以完美地工作

我已经浏览了https://angular.io/guide/dynamic-component-loader但它对我的场景没有帮助

什么是更好的？使用 ngFor 或 ViewContainerRef 动态创建组件？有什么区别？

例如，如果我有一个按钮来创建一个新元素，每次按下它都会生成一个新组件。

1）第一个选项如下

2）第二个选项

第一个选项是迭代数组并通过带有 ngFor 的组件显示其内容的典型方式。第二个选项使用 ViewContainerRef 而不是 ngFor。可以在以下链接中看到一个示例。

https://stackblitz.com/edit/add-or-remove-dynamic-component?file=src%2Fapp%2Fparent%2Fparent.component.ts

https://stackblitz.com/edit/angular-jukjib

我有以下问题。我有一个包含 Angular 8 组件名称和 html 元素的数组。目前它正在创建 angular 8 组件和 html 元素，但不会像在数组中排序那样排列它们。这是我的代码：

我的 DOM 如下所示

角度组件总是直接插入到 .content div 之后。我已经尝试过使用 Container.insert 但它也不起作用。

让我们考虑组件结构：

appComponent > router-outlet (A, B, C) > a, b, c （根据选择一个），其中： A, B, C：动态加载a, b, c（动态组件加载器） a, b, c :动态加载的组件

本练习的目的是能够为不同的寄存器（假设用户）提供组件 a、b、c 的版本，因此我在每个表单 a、b、c 中输入的信息始终在每个用户的内存中可用。

我正在使用路由器插座显示一个 ViewContainerRef，它创建“子路由”组件的实例，这意味着，如果我想要路由a、b、c，那么我使用A、B、C 将它们加载到路由器插座中作为仅具有 ViewContainerRef 的组件，然后在每个组件中分别加载动态组件a、b、c（如果之前未创建，它们将存储在集中式服务中），在离开路由之前，我实现 canDeactivate 以分离ViewContainer 中的当前视图，因此a、b、c的组件实例永远不会被破坏，当我为某个用户返回该特定路线时，我可以将它们插入到加载器上。

这是一个正确的方法吗？或者我不应该将动态组件加载器与路由器插座混合在一起吗？

更新：如果我想在 a、b、c 中再多一个路由器插座，将我带到 c、d 怎么办？我遇到了问题，因为它似乎无法识别放置在 a、b、c 上的路由器插座，因此不显示动态组件加载器 C、D

我需要从 Angular 中父组件的动态子组件中实现的接口调用通用方法。我的父 html 组件将如下所示：

parent.component.html ：

假设有一个接口 'ComponentActions' 包含一个方法 resetComponent() 并且所有子组件都实现了它。示例子组件结构将是这样的

child-a.component.ts ：

如何通过从父级单击按钮在子组件中调用此方法？

我不知道这是否可能，但我已经构建了一个运行良好的动态表单组件，我可以通过配置文件控制许多项目。

我无法控制的一项是输入字段的宽度，我尝试了十几种方法，但似乎都没有。即在创建表单控件等时在组件中设置宽度

有谁知道我正在尝试做的事情是否真的可行并且可以为我指明正确的方向。

模板代码

打字稿代码

表单模板配置文件

我有以下问题，我认为这是一个常见的情况，但我无法解决它。我有一个小的错误警报组件，里面有一个显示错误的方法。我在路由组件中使用它的方式是我使用@viewChild 查询来访问它的addNewMessage方法并且它可以工作。

这次我有一个来自 ng-bootstrap 的 NgbModal，我用它打开了一个组件。在这个组件中，我需要使用我的错误组件来显示错误，但我无法使错误组件在模态中正确加载，我也无法使用 viewChild 访问它的方法，我不确定问题出在 viewChild 还是组件上由于模块配置中缺少某些内容而无法加载。

这就是我在路由组件中调用我的模式（NewRecordingFormComponent）的方式：

这就是我在模态中使用我的错误组件的方式：

这就是组件在编译后在 html 中的显示方式：

这是我使用的 viewChild 查询NewRecordingFormComponent：

此查询适用于路由组件。

我不知道如何使这项工作，当我查看 html 时，我应该在其中看到一个 ng-for，但我在这里什么也没看到，这让我觉得组件没有被编译，就像 angular 不知道它一样一个组件，然后将其保留为纯 html。

我觉得在我的模态组件中找不到这个组件，可能是因为我使用引导模态打开它的方式？是因为我在动态组件上使用它并且因为它没有绑定到任何路由它没有被加载？我必须手动加载 y 还是手动声明它才能在模态中使用？

我还能把什么放在这里以便我可以得到帮助？我对这个版本的角度很新，我正在搜索，但我找不到与我看到的相似的东西，非常感谢任何帮助！