问题标签 [angular-dynamic-components]

我正在为我的一个项目实施动态组件。动态组件的概念是一旦需要它们就会进入内存，并且在任何模板中都没有引用。

根据官方文档，我们声明这些组件是entryComponents为了防止它们在摇树过程中被丢弃，因为它们没有模板引用。

以下是app.module.ts我在数组中声明两个动态组件SlideOneComponent的位置：SlideTwoComponententryComponents

上面app.module.ts我收到以下错误：

一旦我将两个动态组件添加到declarations数组中，上述错误就会消失。上述官方文档还说，我们不需要声明可从entryComponents或组件访问的bootstrap组件。我也访问了这个答案，但这似乎并不令人满意，因为它参考了 Ionic。

请帮助我知道我在哪里失踪。提前致谢！:)

我正在使用 Angular 4，我正在尝试使用一些外部数据动态设置路由。基于通过互联网提供的一些解决方案，我试图通过调用动态加载路由： this.router.config.unshift({path:'base',component:BaseComponent,data:this.rcs.getRouteData('base')});
这rcs只是一个服务 - 一些数据的（提供者）要传递给在此路径上调用的组件。

但是，如果我尝试从其他组件动态设置相同的路由路径（即，通过router->config->unshift从 AppComponent (app.component.ts) 以外的其他组件调用方法），则路由不起作用。在这种情况下，如果我尝试路由到动态设置的路径，它会返回到设置的组件"**"（基本上是在没有找到匹配的路径配置时应该显示的组件。

我在这里遗漏了什么吗，如何从 AppComponent 以外的任何其他组件动态加载角度路径。

代码： app.component.ts ：

app.component.html

路由模块

我正在使用一个输入字段组件，我可以使用表单将它嵌入到不同的父组件中。

在输入子组件中，我有一个 i18n 翻译键作为使用插值的变量，我想根据客户的选择从父组件动态生成。

input.component.ts：

form.component.ts：

问题是，在运行应用程序时，翻译发生在将键传递给子组件中的变量之前，因此没有对 key/id: 进行翻译@@LabelSecondName。

因此，labelText 保留了原始语言。我没有翻译，而是得到一种随机生成的数字，并且由于XLF（2.0 版）文件中不存在这些数字作为键，因此文本/标签未翻译。

错误信息：Missing translation for message "8901569964118207331"

这种行为是预期的，因为变量：labelTextKey没有得到值：@@LabelSecondName及时传递。

一直在寻找，但无法找到正确的解决方案。这个问题似乎更接近我的问题，但并不完全相同，也没有答案。

我使用角度 5 的动态组件创建了 n 级嵌套展开/折叠功能。

功能上一切正常，但是当我加载多个 dom 元素时，浏览器崩溃或滚动停止工作（Jerky Scroll）

基本上它的高级报告功能具有用户选择的过滤器和我们提供的按维度分组。

这是我开发的功能的工作原理

1) 用户访问网络应用程序上的报告页面。2) 用户选择过滤器和 groupby 参数，据此我生成具有多行的基于 div 的表。

现在，我一直在检查用户是否可以根据我使用 group by 维护的对象进一步展开/折叠行。这里 group by 表示用户可以使用的级别数

例如，按参数分组是 Country、OS、Appname 和 Campaign，我将呈现第一级表，显示所有可用国家/地区的数据，每行都有展开按钮，单击展开按钮我呈现另一个包含操作系统 (OS) 数据的表对于那个特定的国家等等......

我实际上已经确定了为什么会出现性能问题，这可能是因为我正在检查由下一个 groupby 对象和 isCollapsed 参数标识的特定展开/折叠按钮。由于该特定条件是定期检查多次滚动停止工作或浏览器开始执行缓慢

这是说明其工作原理和滚动条性能的视频

我无法在 plunker 或任何其他在线工具上上传代码，因为它已经集成到我正在开发的具有实际数据的平台中。

由于 stackoverflow 字符限制，我无法在此处添加代码，但已创建要点。

这是访问代码的网址：

一旦性能问题得到解决，我想让代码更可重用。

看看这个，让我知道我的错误，以提高代码质量和性能问题。

谢谢。

我有一个简单的组件

另一个实例化第一个：

的模板AppComponent只是

，所以输出是

我要做的是MyComponent在实例化期间自定义模板并将其p标签替换为名称应该为tagName. 在执行方法MyComponent时，我在创建之前就知道标签的名称。AppComponent.ngOnInit

我试图解决的另一项任务是MyComponent包装标签名称定制。替换<div my-component>...为<span my-component>..."span" 是所需的标签名称，也称为AppComponent.ngOnInit.

那么是否有可能以编程方式提供这样的定制并获得以下信息：

? tagName可以是任何允许的 HTML 标记，并且 ngIf/Switch 不是一个选项。我为快速潜水创建了演示：https ://stackblitz.com/edit/angular-zngyoa

我有一个组件 ts 文件，如下所示

在我的模板中，我使用如下所示的 innerHtml 方法插入 html

因此，它将输出显示为输入框，但 ngModel 值未呈现到输入框中。

我也尝试使用 sanitize，仍然模型值没有插入输入框。

消毒尝试了两种方式，例如，

如何使用 angular2/4/5 实现这一点？

提前致谢

假设我们进行 API 调用并在 String 中获取一些 HTML DOM。内容以不带角度的 HTML 形式出现，因此我必须首先将其转换为我想要的 Angular，然后将其编译为 Angular。

示例 API 响应：

我正在对其进行转换以获取所有 Anchors<a href="x"></a>并将它们转换为具有输入和输出的角度组件，这些组件将被注入父容器并一起解析，例如：

angular-anchor包含一个 click 方法，该方法从这些组件外部但在 angular 内部（来自服务）执行代码。

通过[innerHTML]在父容器中使用，其中转换是由管道完成的，就像：

内部的 Angular 组件不会被加载，整个工作只是由管道转换中包含的 safeHTML 解析的原始 Angular。

为了解决这个问题，我使用了 ng-dynamic 库，但它已经过时并且与 AOT 编译不兼容。尽管如此，我还是设法将它与 JIT 编译一起使用，但这对生产不利，效率也低得多。

这种方法的示例，“parentDIV”是一个标准的 HTML 标记：

context包含新组件内部所需的所有依赖项，例如我在“angular-anchor”中使用的第三个服务

从这一点开始，我阅读了几篇关于Angular Elements或Dynamic Components Injector的文档，但我无法在我的应用程序中使用它。

使用我刚才提到的这些方法或任何其他方法来使用 AOT 提供的自定义角度组件有什么好的方法吗？

提前致谢。如果需要，请向我询问更多详细信息。

我有一个 Angular7 应用程序，用户可以在其中通过拖放重新排列表格的选项卡。当我们将标签拖到另一个标签上时，我想在悬停标签之后或之前插入一个预览组件，它只是一个带有小 HTML 块的组件指示选项卡将被放置的位置。

我为此使用动态组件，我在选项卡上有 dragenter 事件，我在其中调用创建动态组件的服务。

选项卡上的 DragEnter 事件：

服务 ：

这非常适合在悬停选项卡之后插入预览组件，但我还没有找到在悬停选项卡之前插入组件的方法。

有谁知道是否有办法使用角度动态分量来做到这一点？

谢谢你的帮助

我遇到了ng-dynamic-component包，同时与 AngularngComponentOutlet无法实现@Input的 s 和@Outputs 交互作斗争。

在我的应用程序中，我想在*ngFor.

阅读ng-dynamic-component文档，与@Inputs 和@Outputs 交互并不是在 HTML 模板中，而是在组件实现本身中。

考虑到我需要遍历所有选项卡这一事实，每个选项卡都需要根据其实例获取不同@Input的数据并订阅 s 的不同数据，例如，@Output

除了用inputsandoutputs成员破坏我的选项卡对象，或者创建一个特殊的接口，例如：

知道如何实现这种行为吗？有什么方法可以很好地利用当前选项卡*ngFor并操作基本功能？inputs

我可以在我的组件上创建两种方法来计算所需的输入和输出，但是对于tab使用*ngFor

提前感谢您的任何见解！

我的问题场景如下，

我有一个带有大表格的页面（+100 个输入）。这些输入分为多个部分，这些部分被开发为不同的组件（用于重用目的）。所以页面的总体布局是这样的，

每个表单部分都需要一些时间来处理，因为大部分输入是材料选择框，并且需要从 REST API 加载必要的数据并进行处理。

在上面显示的布局中，angular 会尝试一次渲染所有表单部分，因此会增加每个部分的处理时间，这将导致浏览器冻结。

所以，我的计划是一个接一个地加载部分。有没有推荐的方法来实现这一目标？

我试图编写一个结构指令来一个接一个地加载组件。即使该指令有效，我也无法知道组件何时完成其内部处理工作（可能是 AfterViewInit 挂钩）。该指令看起来像这样，

.

.

如果我能以某种方式从IfPreviousBlockLoadedDirective这个方法访问关联的组件，它将无缝地工作。

是否有任何建议可以解决此问题，或者是否有任何其他方法可以在不更改表单部分组件的情况下实现此目的？

注意：表单部分可以是任何角度组件。