问题标签 [angular-dynamic-components]

我正在以通常的方式创建一个动态组件，如下所示。

我将它的索引存储在别处，以便检索组件

然后我想编辑名称，但我做不到。它不允许我访问该实例，或者没有更改它的功能。

你是怎么做到的？顺便说一句，在 Angular 中编辑内容子项非常容易。为什么对动态的如此苛刻？

我想动态处理模块

不仅在demo上绘制demoule中的组件，还绘制imports中的组件

除了 impont 模块，我想在 ViewChild 中执行此操作。我想在 ngModuleFactory 中打开 moduleType。我有一个错误。

这个.module

模态组件.ts

错误：'类型'Type'的值不可调用。你的意思是包括'新'？ts（2348）'

我正在根据它的类型创建动态组件。

使用上面的结构，我创建了父组件，ParagraphComponent如果你注意到ranges有一个type，所以我想创建一个LinkComponent.

有什么问题 ？

LinkComponent被创建但不在它的父组件内，它是在ParagraphComponent.

但实际上应该是这样的，

下面是渲染组件的代码，

我在这里做错了什么，请帮忙。

我通过将html数据和函数绑定到它来创建具有动态组件的运行时组件模块，我从api调用中获取它作为字符串数据。然后将新生成的组件加载到我的容器中，放置在选项卡中，因为我正在根据数据动态创建选项卡。该过程适用于第一个选项卡，但不适用于其他选项卡。

这可能意味着，我推送运行时组件的容器只生成一次，因此不会反映其他选项卡。

HTML：

零件：

我有一个滑块，其中是动态创建的项目 - 这些是子组件。

滑块的 ng-container 父模板在哪里：

这些子组件由 appSliderForm 指令创建：

在我的子组件中，我有一个移除功能，用于从滑块中移除自身。

当通过单击子组件模板中的删除图标调用此删除函数时，我想发出事件以告知父组件以根据其进行其他操作，但未调用父组件中的函数removeQuestion。

你能告诉我为什么不叫这个removeQuestion函数吗？

更新

我在 chrome 浏览器中对其进行了调试，当在 onRemove 对象上调用emit函数时，我看到我的onRemove EventEmitter 对象的观察者数组属性中没有任何值。

我正在使用服务创建动态组件。组件已创建，但未ngOnDestroy调用生命周期外观。

下面是我的服务文件代码。

在 Component.ts

请告诉我销毁组件实例的最佳方法

问题：

我有一个两层的ngForAngular 模板。在 内部ngFor，我使用了很多ngSwitchCase来选择我想要动态显示的 HTML 元素。

此页面成功显示我想要的内容，但此页面的渲染速度和操作在 Chrome 中有点慢，不快但可以接受（但在 IE11 中，使用速度太慢......）

这是模板：

获取样式（ans）

我在想 ...

我正在考虑两种方法来提高此页面的速度，但我不确定它们。

1. 更改为用于ComponentFactoryResolver动态生成组件。（我不确定这是否会很快）

2. 在 Typescript 中生成一个组合的静态 HTML，然后将它们加载到 Angular 模板中？（我不确定具体的实现）

有人会给我一些关于这两种方式的建议或新的建议吗？

谢谢你的帮助，谢谢。

我用 ndc-dynamic 实现了创建动态组件。

它适用于输出，但输入不起作用。

我将展示我的代码。

在 ts 文件中

这两个代码在父组件中。

子组件：

并在 HTML

我做错什么了吗？

任何解决方案？

此致，

狮子座

• 这是我发现的一个解决方案，我认为对其他人有用。

• 这可以应用于任何未设置 ViewContainerRef 的本机元素。

我正在尝试在单击事件上在表格（Tabulator v4.2）内植入角度组件。该表是由插件动态创建的，因此我无法访问需要为其设置角度 ViewContainerRef 的 DOM 元素。在单击事件回调中，我可以访问要添加角度组件的元素。

如何在没有设置角度 ViewContainerRef 的情况下将角度组件添加到该元素？

每次单击都应创建一个新组件并将其设置在给定的 DOM 元素中。

免责声明：这个问题的灵感来自于 Medium 上的“ Here is what you need to know about dynamic components in Angular ”。

有一位作者展示了如何动态生成模块和组件，将后者放入前者，动态编译模块，获取组件工厂并使用它通过ViewContainerRef生成组件。

这在基本设置中工作得很好。

现在让我们假设我们想要动态生成一个组件，但这次使用的是使用异步管道的模板。

接下来，我们需要让这个东西在生产环境中工作，这意味着两件事：

• AOT已启用
• enableProdMode()已在引导应用程序时调用

由于 Angular 编译器不可用，我们可以为应用程序根模块中的 Compiler 令牌提供一个jit 编译器的实例。

app.module.ts：

app.component.ts

如果我们运行它并打开 DevTools，我们可以看到以下错误：

ERROR 错误：模块“function(){}”导入了意外的值“function(){}”。请添加 @NgModule 注释。

该问题仅在开发模式下发生。Angular 版本是 7.2.0。

因此问题是 - 必须做些什么才能使其在 AOT 模式下工作？