问题标签 [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 回答
49 浏览

angular - Angular:无法绑定到动态加载的组件上的点击和更改等事件

我创建了 2 个 angular 5 组件,它们是一个对话框和一个下拉菜单。

我想在对话框中打开下拉组件,所以我为它创建了一个对话服务,它被注入到 app.component 中。app.component 中的代码如下-

TestComponent 非常简单,它在 HTML 文件中有组件选择器,如下所示 -

其中 customLanguages 是一系列选项。

DialogService 是一个简单的服务,它做两件事-

1)在body中添加一个对话框组件

这是代码片段-

2:在对话框中打开/追加 TestComponent 到一个 div

最后一件事<once-ui-dropdown是一个 Angular 5 组件,它具有一些功能,如 openDialog、changeOptions 等,它的 HTML 看起来像这样 -

现在,问题是“我能够将数据/道具(选项数组)绑定到下拉组件,但没有调用诸如单击和更改之类的事件。动态加载的组件上的事件绑定似乎有些问题。” . 请帮忙!

0 投票
1 回答
675 浏览

angular - 如何为步进器上的每一步加载一个动态组件

我的问题是我必须在模板上步进器的每一步上动态加载数组的一个组件。

我按照 Angular 指南将动态组件加载到模板中,但现在我只能将数组中的所有组件渲染到步进器的第一步,就像其他步骤没有锚元素一样,或者我无法定位该锚元素。

我制作了一个非功能性的 Stackblitz 来展示我需要实现的目标。关于如何做的任何线索?

https://stackblitz.com/edit/angular-1hulxp

0 投票
1 回答
109 浏览

angular - 动态角度组件

我需要向 Angular 应用程序添加一个动态组件。这个想法是将组件捆绑在一个 JavaScript 文件中,该文件将在某些条件下下载。

整个想法是在独立组件(功能)准备好时发布它们。它们应该与应用程序无缝协作,而无需重新编译主应用程序。

我确实看过https://angular.io/guide/dynamic-component-loader。但是该示例将动态组件与我无法执行的解决方案一起编译。

知道如何实现这一目标吗?

0 投票
1 回答
1409 浏览

angular - 访问组件的实例并在角度 6 中更改其值

  1. 第一个组件的onClick 我要更改第二个组件的值

  2. 值(名称)应从“helloworld”更改为“myworld”。两个组件都加载在同一页面上。如何区分它们并更改值?

  3. 如果两者都是动态加载的,我如何访问实例并动态更改值?

小例子:https ://stackblitz.com/edit/angular-iew4mn

在这个动态加载的组件中没有提到

0 投票
0 回答
1801 浏览

angular - Angular 6 动态组件

我正在开发一个项目,我需要动态创建组件并将它们添加到选项卡,但最初我创建了一个包含两个组件的小项目,我想在 div 中动态加载这两个组件

应用模块.ts

我的.component.ts

app.component.ts

app.component.html

我收到错误:TestOne 中的错误不能用作入口组件。

我在 app.module 和 app.components 中添加了这两个组件作为 entryComponents,但每次我都遇到同样的问题。

谁能让我知道我错过了什么?

0 投票
1 回答
17448 浏览

angular - 如何以角度动态删除组件

我经历了角度动态加载组件。但我找不到如何动态删除组件。

我的要求是聊天应用程序根据对话加载动态组件(图像/图形/列表/表格)。但是,如果对话继续进行,我该如何销毁组件。

我正在尝试使用外部事件破坏动态组件。

请帮助如何进行。

编辑:https ://stackblitz.com/angular/emjkxxxdxmk?file=src%2Fapp%2Fad-banner.component.ts

我根据这个例子开发了我的代码。我需要使用来自订阅另一个组件(聊天组件)的服务的 API 调用,而不是时间间隔。

下面的 API 响应可以加载组件。我正在寻找如何销毁已经加载的组件,我再次使用 API 调用。

0 投票
2 回答
2228 浏览

angular - Angular - mat-tab 中的动态组件

我有一个 mat-tab-group(角度材料),我希望能够从 mat-tabs 后面的代码中添加,包括其他组件。我正在使用 ComponentFactoryResolver 创建组件,但我无法通过 ViewContainerRef 将新组件添加到新的 mat-tab

html

后面的代码

0 投票
0 回答
153 浏览

javascript - Angular 6:动态创建的组件的第二次初始化后无法读取未定义的属性

我正在尝试动态创建一个组件,该组件具有要初始化的模型类。

这是我面临的问题: 控制台错误

当我创建组件一次然后当我第二次尝试时它会说问题

这是我的代码:

.HTML

.COMPONENT.TS

这就是我动态创建组件的方式:

这就是我销毁创建的组件的方式:

我对其他组件做了同样的事情,它们工作正常,除了其他组件和这个组件(ElCategoriesEditComponent)之间的不同之处在于这个组件有一个子组件。

我知道很难描述这样的问题,或者我无法说得更清楚,请询问我是否需要更多信息。

任何帮助都会在很长一段时间内拯救我。

提前致谢 !

0 投票
1 回答
95 浏览

angular - 使用父类动态加载组件

我正在尝试为动态组件加载创建通用代码。我已经实现了父子关系。其中,child 覆盖了 parent,将用于动态加载组件。下面是我关注的链接 -

动态组件加载

我对其进行了更改,现在它看起来像下面的链接 -

更新了我的更改

不知何故,它不起作用并且不加载更改。我在这里想念什么。

0 投票
1 回答
31 浏览

angular - 动态创建的对象发出的 Angular 捕捉事件

我有一个组件生成器,用于动态生成组件并在其模板中呈现它们。组件发出的任何事件都需要被组件生成器捕获,需要处理数据,并且需要将处理后的数据传递给下一个控件。

我正在研究 Angular6,虽然我在代码中使用了 subscribe 方法,但订阅的处理程序似乎没有接收到发出的事件。

以下是简单组件生成器代码的 stackblitz 链接:- https://stackblitz.com/edit/angular-componentgenerator

让我知道你的想法。

谢谢