问题标签 [angular-dynamic-components]

我正在MyComponent使用以下代码动态加载 Angular 组件 ()。创建组件后，我还将一些数据传递给组件。

什么时候触发OnInit生命周期事件？MyComponent调用后会立即触发createComponent()吗？还是只会在之后调用它setData()？

由于某些业务逻辑，我必须读取动态组件（EntryComponents）的元数据。

要读取元数据，以下是我的方法。

1. 使用ComponentFactoryResolver读取模块的所有组件
2. 使用组件名称和特定方法过滤掉类
3. 创建组件并读取数据
4. 销毁组件。

.

问题

在开发过程中，工厂名称工作正常，并且与动态组件类相同。

但是在使用 ng build --prod 构建项目之后。工厂名称如下

如您所见，首先我在哪里以及为什么会收到错误 IDK。

其次，工厂类名称相同。因此，相同的动态组件被加载了 10 次（因为有 10 个动态组件）。

这是 NgModule

我真的不知道为什么会这样。有人可以把我放在正确的方向吗？

我正在尝试使用 Angular 8 创建自定义输入组件。我想使用 JSON 元数据动态加载该自定义输入组件。当我渲染组件时，我想使用 Reactive 表单将值绑定到它。父组件将创建表单组，我将相应地设置我的自定义组件 formControlName。

我尝试将 ControlValueAccessor 接口添加到组件并实现了接口方法。但是它们都没有触发。我还为我的组件 NG_VALUE_ACCESSOR 提供了提供程序。

文本框模板代码：

指令代码：

根组件模板

根组件.ts 文件

示例 json：我们从服务方法中获得

期望执行接口方法。但是没有一个接口方法正在执行/调用。因此没有发生绑定。

我在模板上有不同的按钮，例如输入、复选框、单选、按钮等，并且在单击每个按钮时，它们对应的表单字段应该会显示出来。

例如 - 单击输入按钮时，应动态创建输入按钮组件并显示。并且这个字段也有remove按钮，点击remove按钮他们对应的字段应该从dom中移除。

我有关于动态生成组件的基本想法，需要帮助来完成上述场景。

呈现表单字段的示例对象结构可以如下所示：

我想根据条件将 html 元素从父 级传递 给子级

为了解决这个问题，我使用ngTemplateOutlet， ngContent通过角度的内容投影概念。

我在控制台中收到错误错误错误：templateRef.createEmbeddedView 不是函数

我试过这样

请找到我制定的链接https://stackblitz.com/edit/angular-yzzsgs-dnfgaq?file=src/app/app.component.ts

还有其他方法吗？

任何帮助都会很明显

提前致谢

我需要创建带有组件的主机组件，以在mat-tab. 组件在列表中提供，并且可以有所不同。由于我们不知道要渲染哪个组件，我们如何将输入和输出与父（主机）视图和动态创建的组件绑定。

前任：

对于我已经考虑ViewContainerRef过的替代ComponentFactoryResolver方法。由于存在并且无法添加更多选项卡，因此这种方式ViewContainerRef变得未定义。*ngIf

这个问题有什么解决办法吗？

我已经提到了Angular 文档

好的，所以我有一个带有 104 个组件（小部件）的DashboardSharedModule 。

然后是一个自定义页面（CustomizationModule），用户可以在其中从 104 个小部件（组件）中进行选择，这是延迟加载的模块。

每当我导航到自定义页面时，所有 104 个组件都会立即加载，并且加载需要将近 4-5 秒。

加载所有这些组件的最佳方式是什么？也许使用滚动技术？

但是每当我在CustomizationModule模块中导入DashboardSharedModule时，它​​都会加载所有组件。

应该怎么做才能避免组件加载延迟 4-5 秒。

我想知道如何创建嵌套的动态组件并维护其父子关系。

例如，我有这样的数据，

我想创建这样的组件，

但是使用我的代码，我只能创建父组件或子组件。但不是两者兼而有之。

下面是我的代码，

使用此代码，我得到此输出。

链接到工作示例，StackBlitz

请帮我解决这个问题。

更新。

即使添加了viewChild，它仍然会抛出viewchild not defined。

请参阅此图片，在 component.instance 中我没有看到视图子元素。

更新了 stackblitz 链接https://stackblitz.com/edit/angular-dynamic-new-mepwch?file=src/app/content/a/a.component.ts

我正在尝试为弹出窗口创建一个动态组件，以便为不同的内容创建视图和编辑页面。我制作了一个弹出组件，我想在其中传递一个新的组件名称和页面标题。但是，我没有在弹出组件中获得新的组件数据。请查看代码，如果您需要更多详细信息，请询问。提前致谢。

我试图在另一个组件中注入服务，并在单击按钮时获取数据，但在弹出组件中，我没有获取数据。目前，我只对 popup.component.ts 文件执行 console.log 数据，但在 console.log 中没有结果。

弹出服务.ts

弹出组件.ts

这是调用动态组件并应创建弹出窗口的代码。组件.ts

组件.html

我正在构建的网站有多个组件。在“主页”页面组件上，当用户单击按钮向页面添加内容时，我想将他们选择的组件附加到“主页”组件。我已经研究并发现了 3 种方法，但我想知道考虑这种功能的最佳实践是什么。该页面将使用其他用户已经添加的一些组件进行初始化。我希望用户能够添加到那里的组件。

Angular 说我应该这样做： https ://angular.io/guide/dynamic-component-loader

Angular Material 说我应该这样做： https ://material.angular.io/cdk/portal/overview

而且我个人期望以这种方式（可行），但我认为这不是“最佳实践”：

所以当用户点击这个标签时，它会触发 append 方法：

<a class="dropdown-item" href="#!" (click)="prependMedia('elementOne')">ElementOne</a>

该方法在组件的 TS 文件中调用它，有效地将新元素推送到数组中。然后列出的 HTML 将监视添加的新元素并将组件放入 ngFor：

打字稿文件：

将组件的新模型添加到 mediaElements 数组后将添加组件的 HTML 文件：

我的问题：我对 ngFor 使用的方法有什么问题？不是以自以为是的方式，而是在技术上。当用户单击按钮将组件添加到页面时，将组件添加到 DOM 的“最佳实践”方式是什么？为什么？不是以固执己见的方式，而是技术上或来自 Angular 团队的证据。

我最初打算使用我在代码中显示的方式，但现在我找到了 Angular 方式和 Angular Material 方式，我正在寻找关于最佳方式的事实。

请指教？由于有些人认为这对意见过于开放，因此保持技术性会有所帮助。

如果您需要任何进一步的描述，请告诉我。

谢谢你，埃里克