问题标签 [angular-dynamic-components]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
48 浏览

angular - 使用 $compile 寻找 angularJs 算法的角度解决方案

我有一个 angularJs 应用程序,我正在迁移到 angular(使用 ngUpgrade),它有一种插件类型架构,可以将额外的“第 3 方”angularjs 模块添加到核心应用程序中。

app 的一个关键特性,是一种“dom 装饰器”操作,基本上是这样工作的:

页面上有一个根组件存在于核心应用程序中,我们称之为

通过配置,有人会添加额外的 angulajs 模块,可以说包含 2 个未知的组件指令,称为dec-adec-b

(这些组件将遵循严格的嵌入合同)

因此根组件将更新其模板,如下所示:

然后它将使用 $compile 更新模板。

所以基本上要求是我需要更新模板以动态添加“未知”组件(它们将被角化,而不是根组件)

通过将插件组件转换为 Web 组件,我确实设法得到了一些工作......使用角度元素,但我真的不喜欢这种方法,它更冗长,如果我有,我不确定性能一个页面上有 50 个这样的根组件,每个组件上都有 5-10 个修饰指令。

蒂亚!/布莱恩

0 投票
0 回答
1964 浏览

angular - Angular 7 TypeError:无法读取未定义的属性“createComponent”

我收到一个

TypeError:无法读取未定义的属性“createComponent”

在尝试动态加载组件时。

我也尝试过不同的容器(以防万一)

我迷路了。任何代码示例也将不胜感激。

0 投票
1 回答
769 浏览

angular - 如何使用 Angular 7 保存/加载动态创建的组件

我想制作像Linkedin博客这样的网站。

我可以像这样创建动态组件。但是当我重新加载浏览器时,动态创建的组件就消失了。

如何将动态创建的组件缓存到 localStorage?以及当我重新加载浏览器时如何从 localStorage 动态加载组件?

还有一个问题。我需要在这段代码中使用 ngOnDestroy() 吗?

我像这样添加了 localStorage 部分。但是发生“在 JSON.stringify 将循环结构转换为 JSON”类型错误。

缓存 ComponentRef 对象数组的最佳解决方案是什么?

⬇︎这是父组件

⬇︎这是父组件的HTML

0 投票
1 回答
651 浏览

angular - 如何将动态组件保存到ngrx/store?如何从ngrx/store 加载动态组件?

我想将动态组件保存到@ngrx/store。但我收到 ERROR TypeError: Cannot freeze when dispatch an action from my component。

我参考了这个页面为什么我得到“TypeEror:无法冻结”?. 我复制了组件对象。但我仍然收到此错误。

零件 :

行动:

减速器:

选择器:

0 投票
1 回答
1339 浏览

angular - 工具提示作为动态组件

我想将工具提示添加到 svg 元素,但作为动态创建的组件。我将工具提示添加到元素中,使用TooltipDirectivesvg元素,即

TooltipDirective动态创建TooltipComponent(在方法中onMouseEnter),并使用渲染器并ElementRef设置它相对于宿主元素(svg 图表)的位置。或者至少它应该这样做。问题是它没有,尽管设置了 的位置TooltipComponent,组件总是被添加到错误的位置。工具提示应该在圆圈旁边,而不是如下所示:

工具提示会忽略使用渲染器设置的坐标

为什么动态工具提示组件忽略了使用渲染器设置的样式选项?这是完整的例子。想法是将tooltip添加为组件,以尽量避免svg的父元素overflow: hidden设置。

0 投票
1 回答
874 浏览

angular - 带有 api 数据的 Angular 动态表单

我们有任何最好的例子来从数据创建动态表单吗?哪个输入文件总是动态的。我正在寻找的用例是我有 api,它的记录集总是不真正组成意味着今天如果有 20 条记录,明天可能会增加到另外 20 条,在这种情况下,我们有任何类型的分叉吗?

0 投票
2 回答
1262 浏览

angular - 使用带有 resolveComponentFactory 的通用组件会导致 Component<{}> 而不是

我已经构建了一个对话服务,它动态地创建一个带有子组件的 DialogComponent。

我希望我的 DialogComponent 是一个通用类,<T>因为我希望为我正在使用的任何子组件键入。我目前正在使用这些行创建我的 DialogComponent ->

问题是 resolveComponentFactory 实际上返回的是 aDialogComponent<{}>而不是T. 我确实尝试过投射,但似乎我不能,因为缺少一些方法。

我想知道我怎么能做到这一点!

谢谢。

编辑

this.componentFactoryResolver.resolveComponentFactory<DialogComponent<T>>做的伎俩..

0 投票
1 回答
2747 浏览

javascript - 在 Angular 动态表单中添加新的键值对

我在 Angular 动态表单中要求在单击添加按钮时添加键值对。键和值都应该是可编辑的

a)- 我们可以从主列表中选择键,也可以是自由文本框(如果主列表中没有值,则自动完成应由文本框替换)。

b)- 值应该是一个文本框。

此外,应该有一个附近的保存按钮和删除按钮以及上面的字段来提交或删除它。

根据我们项目中的当前实现,“key”始终是硬编码的,“value”在表单组内是可编辑的。

以动态形式添加新键值对的最佳方法应该是什么?

1-我们是否需要创建一个新的表单组来添加新行?

2-利用当前方法并在同一表单组中扩展其功能

任何方法/线索都将受到欢迎。

0 投票
1 回答
811 浏览

angular - 以角度动态加载嵌套组件?

我想组织我所有的选项卡组件动态组件。我正在为 ui 标签使用 primg ng。目前我的代码是

  • allTabs.component.html

  • /li>

这里每个选项卡都包含每个组件。当这条路线正在加载时,所有组件都被初始化,所以我想使用动态组件加载来减少加载时间。所以后来我尝试使用 anhular 提供的动态组件加载器来组织我的组件。

毕竟Tabs.component.html 看起来像

  • allTabs.component.ts

  • a.component.html

合同!!

b.componet.html

即使我有子组件在组件

例如:AppAComponent.htnml(

  • <app-a-child [asle]="ddata"></app-a-child>
0 投票
0 回答
28 浏览

angular - 新的动态 Angular 组件总是放在容器的顶部

我正在通过以下方式创建动态组件

无论我在 createComponent 调用中使用什么索引,我总是将新组件放在首位。我究竟做错了什么?