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

angular - 如何使用 ng-dynamic-component 的 DynamicModule.withComponents 而不为这些组件创建依赖关系?

我有 3 个模块,每个模块都有一个组件:

我正在使用ng-dynamic-component包将任务、人员以及将来的其他一些组件动态设置为 DynamicContainerComponent。

动态容器.html

数组 dynComponents 如下所示:

现在这已经创建了对 TasksModule 和 PeopleModule 的依赖,但另外 DynamicContainerModule 看起来像这样

那么如何才能删除这些依赖项并使 DynamicContainerComponent 真正动态化呢?我想我可以创建特定于应用程序并返回 dynComponents 数组的附加模块(我什至不知道如何正确执行此操作),但 DynamicModule.withComponents 部分更加棘手。

0 投票
2 回答
10477 浏览

angular - Angular 动态组件:@ViewChildren 为 QueryList 中的每个组件获取 ViewContainerRef

我正在构建一个带有动态选项卡的对话框,该对话框可以接收要放置在选项卡正文中的组件。我很难使用@ViewChildren 创建多个动态组件。我过去很容易用一个组件和@ViewChild 成功地做到了这一点。

这是我的模板:

这是我的组件逻辑:

即使在模板中对组件进行硬编码,我的 dynComponents 也是未定义的。我似乎需要从这个 dynComponents QueryList 中获取 ViewContainerRef,但我不确定为什么它根本没有填充。我用这个帖子作为参考:帖子

0 投票
1 回答
1450 浏览

angular - 没有在动态组件上调用 ngOnInit

我在一个项目中使用 Angular 8,但我无法启动动态组件,因为 ngOnInit 没有被调用。我已经构建了一个名为 PlaceholderDirective 的指令,如下所示:

并在 ng-template 上使用了该指令:

包含 ng-template 所在的 HTML 的组件会启动动态组件,如下所示:

实际的动态组件非常简单,注册在 AppModule 的 entryComponents 部分。我已将其缩小到最低限度,以了解问题所在:

最后,动态组件的 HTML:

问题是动态组件中的 ngOnInit 没有被调用,我有其余的数据要在那里初始化,这样我就可以构建模板的其余部分。

真正奇怪的部分是,如果我的控制台没有打开,我打开它,反之亦然,模板就会显示出来。

0 投票
1 回答
1375 浏览

angular - 如何将组件动态添加到服务中的另一个组件

我将动态组件到服务中的另一个组件,首先在服务工厂内部两个组件,我创建了可以访问 ViewContainer 的组件。但是无法创建组件!

服务 :

零件 :

例子 :

this._modalService.open(NewUserForm,...);

0 投票
1 回答
926 浏览

angular - 如何将父组件服务注入Angular中的动态组件?

我正在使用 Angular 8,并且我已经动态创建了组件。我将带有服务的父组件放入提供者数组中。如何将相同的父实例注入MyService动态组件?如果没有动态组件,我可以通过注入该服务的子组件的构造函数来实现它。但是我如何使用动态组件来做到这一点?这是创建动态组件的代码

0 投票
1 回答
2788 浏览

angular - 使用不同的数据多次加载动态组件

我需要多次加载一个动态组件并根据某个值动态传递数据,以便它将加载运行时数据。

我试过下面的例子 https://dzone.com/articles/how-to-dynamically-create-a-component-in-angular

根据示例,我们有一个具有“消息”属性的 messageComponent,在 hostComponent 中,我们在 html 文件中添加一个模板,例如

所以在模板标签的地方,我们的 messageComponent 将被替换。

我需要一些东西,比如我们可以多次迭代这个模板,并在 messageComponent 中动态传递不同的“消息”值。

0 投票
0 回答
61 浏览

javascript - 如何在保存时将动态设置为查看模式

我正在使用角度动态表单,填写表单后,我想将表单设置为查看模式(只读)。

html:

零件:

动态表单组件.ts

我想到的一种方法是添加可以通过单击按钮启用保存的隐藏元素,但有没有更好的方法?我不知道。

0 投票
1 回答
1517 浏览

angular - 在组件函数中选择角度模板,而不是在 @Component 中添加

我正在使用 angular 8,我有一个组件,我有大约 6 个或更多模板。用户将从界面或一些逻辑中选择使用哪一个,比如说,

我不想在这里使用它

我希望它在任何函数中,无论是构造函数还是任何其他函数。如果它使用任何子组件或指令类型的逻辑来解决就可以了,我唯一需要的是在该逻辑上选择模板。我通常会将相同的数据传递给所有模板,只会更改它们的设计。

0 投票
1 回答
40 浏览

angular - 没有视图的动态组件上的输出

在 Angular 8 项目中,我使用以下代码创建了一些没有 viewref 的动态组件:

在 HelloComponent 本身中,我正在等待一些异步任务完成,然后发出 slideContentRendered 但我没有进入订阅方法主体。

在这里你可以看到一个示例应用程序 https://stackblitz.com/edit/angular-krx3y6

我怎样才能访问输出?如果我尝试使用以下代码对 viewref 进行相同操作:

0 投票
1 回答
741 浏览

angular - Angular:如何动态加载由字符串定义的组件?

如何编译由字符串定义的组件并将其呈现在我的模板中?

我尝试使用DomSanitizer

但这并没有正确绑定click事件处理程序onButtonClick()

所需的功能