问题标签 [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 投票
1 回答
816 浏览

javascript - Angular - 使用如何在使用 ng-dynamic-component 动态创建的组件上调用函数

我正在使用 npm 包ng-dynamic-component来创建动态组件。

我处于一种情况,我想使用此包在动态创建的组件上调用特定函数。

我尝试了很多不同的方法,但到目前为止还没有找到解决方案。

有谁知道是否可以在使用上述包动态创建的组件上调用函数?

谢谢 :)

0 投票
1 回答
56 浏览

angular - Angular7 -> 在动态加载的 HTML 中导航到 id="#article-1"

我正在联系返回完整 .html 文件的后端,该文件必须显示在 Angular 组件中。当我得到文件时,它导航到锚点,这在 Angular7 中不起作用,因为它试图导航到 localhost:4200/#。我想允许用户使用锚点进行导航。

我一直在尝试在不使用任何包的情况下执行此操作,使用 InnerHtml、OuterHtml、ElementRef、ViewContainerRef 并在后端解析数据。我尝试用 href="javascript:; (click)="navigate(#id)" 和 routerLink 替换: href="#id" 和碎片。

问题是这个新注入的代码由于 DOM 清理而无法工作。

期望是单击新格式的链接会将我带到那个锚点。

像这样修复它:

0 投票
1 回答
149 浏览

javascript - 将组件动态加载到动态位置

更新(因为我更好地理解了这个问题):

我想根据用户单击的位置(哪个表格行)显示一个组件,我正在使用 ng2-smart-table,现在的问题是没有选择器可以动态加载组件。在我的情况下,它的按钮父级是行。

每行都有一个打开按钮

现在虽然 open 有效,但ViewChild似乎找不到它,并且通过createCompoenentthis.here 是未定义的

我想问题是,我可以动态设置@ViewChild 吗?

0 投票
1 回答
3292 浏览

angular - ngTemplateOutlet : templateRef.createdEmbeddedView 不是一个函数

我正在尝试创建一个模块化表。

为此,我使用模板引用和 ng 容器。

我制作了这个 stackblitz,非常简单:

https://stackblitz.com/edit/angular-2xhely

运行时,它说错误

TypeError:templateRef.createEmbeddedView 不是函数

而且我在网上看了一段时间,似乎找不到解决我的问题的方法。

这是相关的代码。

指示

根组件

表格组件

编辑

我尝试将模板放在表格选择器之外并将其作为表格的输入提供,它似乎可以工作。是不是您不能使用内容儿童来做到这一点?

0 投票
2 回答
314 浏览

angular - 在动态组件加载中导航时如何跟踪组件

我们有 3 个基本导航显示隐藏选项卡视图 tab1、tab2、tab3。除此之外,还有来自sidenav的导航。

每个选项卡都动态加载组件,因此我们从一个组件导航到另一个组件。

其次,当从一个组件到另一个组件的导航结束并且用户单击Done按钮时,它应该降落在最初在 DOM 中打开的 tab1/tab2/tab3 上(即导航结束并降落在 tab1/tab2/tab3 视图上),当组件导航开始。

每当我们向后导航时,我们都无法加载前一个组件,因为每个组件都被不同的组件使用,并且可能是不同导航流程的一部分。

在这里,路由不仅仅涉及将组件加载到视图中。

考虑到给定的场景,是否有角度的方法来实现这一点?

这是stackblitz链接:

https://stackblitz.com/edit/angular-basic-starter-dfqnp3?file=src/app/app.component.ts

0 投票
0 回答
166 浏览

angular - 如何创建富文本框,可以用 Angular 组件替换文本

我想创建内容编辑器,类似于 facebook“创建帖子”文本框,它能够用一些角度组件替换一些标记(例如以 @ 或 # 开头的单词)。

例如

Hello, @John, 将被替换为Hello, <app-username user="John"></app-username>

0 投票
1 回答
223 浏览

angular - 防止 Angular 递归加载组件

我正在将组件动态加载到动态位置,并且由于该组件是我正在使用的表行,selector: 'td'因为我需要应用colspan到动态添加行,然后在其中加载动态组件。问题是我的组件是一个包含<td>标签的表,这些标签导致角度进入无限递归循环!

我的替代方案是什么?

我已经研究了递归组件如何工作的几种方法,但无法找到一种方法来阻止 angular 认为不需要标签 尝试使用*ngTemplateOutlet但迷路了

如果无法预防,我的其他选择是什么?我正在考虑替换<td><div>

0 投票
1 回答
128 浏览

angular - Angular 6 通过服务在 2 个组件实例之间进行通信

我有一个组件通过调用服务动态加载/删除另一个组件。我还让动态添加组件能够自行删除。我的问题是通知其他组件动态组件的这个实例已被删除。

我尝试使用事件输出/发出和主题/订阅,但没有运气。不确定我是否做错了。

这是我的代码,一旦单击按钮并添加了组件,如果我在组件内使用关闭按钮,则主按钮不知道这一点,它需要单击 2 次才能向右切换,加上按钮的文本将是错的

https://stackblitz.com/edit/dynamically-row-components-for-smart-table

我在使用主题并订阅它时遇到的问题会在不影响按钮的情况下针对所有实例触发!

0 投票
1 回答
735 浏览

angular - 从 json 响应创建动态嵌套组件

我正在尝试基于 json 响应创建嵌套的动态组件。

所以在上面的结构中,它作为类型paragraph所以ParagraphComponent需要先渲染。

它作为一个数组对象embbeded,在这个数组中我想渲染TextComponent

所以最终的输出应该是这样的,

以下是我尝试过的,

主要部件

主要 HTML

创建动态组件服务

链接到项目https://stackblitz.com/edit/angular-dynamic-new?file=src/app/app.component.ts

我参考了这个https://github.com/sparkles-dev/ng-content-driven-angular/blob/master/src/app/reactive-content/content-host/content-host.component.ts

仅基于它,我创建了我的项目。但无法使其工作。

请帮忙。

0 投票
0 回答
22 浏览

angular - Angular:如何从库中动态初始化应用程序组件?

我正在构建一个生成表单的 Angular 库(表单定义由 Angular 应用程序提供)。该库具有基本的内置表单字段类型(文本、文本、数字、日期……)。但是某些应用程序需要不属于库的自定义字段,因此我需要我的库能够初始化应用程序中声明的那些自定义组件。

总结一下:

在此处输入图像描述

知道采取哪种方法来实现这种要求吗?