问题标签 [ng-component-outlet]

我有一个类似whatsapp 的聊天案例，其中包含需要以不同方式显示的多种消息。

每个都有自己的组件，例如TextMessageComponent, FileMessageComponent等。

我希望能够ngFor在我的消息数组上一次，而不必ngIf过度类型。

我听说ngComponentOutlet可能是解决方案，但发现很难实施..

任何建议、迷你演示或任何您认为有用的东西都将不胜感激！

ng-content我正在尝试加载不同的“父”组件，并通过定位每个父组件将路由内容注入这些不同的父组件。本质上，每个父组件都根据设备宽度（小型/移动设备、中型/平板电脑和大型/台式机）处理导航和其他样板文件。

在我的应用程序中为每个路由生成的内容需要被嵌入（注入）到父组件中。每条路由的内容都针对特定的注入点，使用ng-content.

我可以使用<ng-container *ngComponentOutlet="ResponsiveComponent;"></ng-container>. 问题是我的路由生成的内容没有被注入到ng-content每个父组件的目标位置。

这是交换父组件的代码。 AppPageComponent扩展ResponsiveComponent它根据媒体查询监视设备宽度。

Angular 的NgComponentOutlet文档显示您可以将可选的可投影节点列表作为目标，以插入到内容 (ng-content) 占位符中。我遵循了 Angular 文档中的示例，并且能够将文本节点注入到ng-content我的父组件中的不同占位符中，它适用于我的小型/中型/大型父组件。

如何从我的路线中获取内容以注入这些不同的占位符？看来我真的很接近让它发挥作用。我可以将本质上的静态内容注入占位符，但我不知道如何将路由生成的内容注入占位符。

更新 - 2017 年 7 月 25 日

我创建了这个plunker 来演示这个场景（https://plnkr.co/edit/hOwRX1Ml6gX0S8em6nd5?p=preview）。

在 plunker 中，page-wrapper组件使用 ngComponentOutlet 根据设备宽度加载小型/中型/大型组件。page-wrapper 组件将静态内容注入到每个小型/中型/大型组件的占位符中，而不是从第 1 页注入路由内容。

我的目标是拥有一个页面包装器组件来处理响应式需求，例如针对小型/中型/大型响应式设计的不同导航元素。

那么，如何将“静态”内容注入到动态加载的组件的ng-content占位符中，而路由生成的内容却没有注入到ng-content占位符中？

谢谢你的帮助。

我有一个关于动态表单的问题。目前的情况是我们有一个模板驱动的表单，要求用户可以重新排序控件并将一些设置为不可见。对于重新排序，我们使用 Dragula，但对于加载存储的设置，我们需要动态生成表单。我们希望保持模板驱动的方法，现在我的想法是使用 ngComponentOutlet 和模板的 ContentChildren 来生成具有存储设置的表单。这可能有没有人有其他想法？如果可能，请提供一个例子。

我正在尝试通过 formControl 使用动态组件加载，但它不会影响我的主机 formGroup。

尝试了这些选项：

模板：

选项 1 - 不工作：

选项 2 - 不工作：

选项 3 - 工作：

组件功能：

getComponent：返回动态组件（支持使用reactiveForm）

getFormControlName：返回表单控件名称。返回字符串

getFormControl：返回formControl对象。表单控件

有人知道我应该怎么做吗？这个有可能？

查看该示例： https ://stackblitz.com/edit/angular-n8sdrm?embed=1&file=app/app.component.html

谢谢

我读了很多关于 ngComponentOutlet 不能使用绑定的信息，但据我了解，所有情况都需要类似子 <--> 父绑定/通信（@Input 和 @Output，为此有一个 ng-dynamic-component ，有效）。我认为我的情况有点简单，我只想让绑定在动态创建的组件和它自己的模板之间得到更新。

顺便说一句，我读了这些页面：

如何使用 ngComponentOutlet 对多种类型的组件进行 ngFor？

https://github.com/angular/angular/issues/15360

Angular 2 动态选项卡，带有用户单击选择的组件

基于第一个链接的 ngfor 和 ngComponentOutlet 的想法，问题在 2. & 3. 链接中描述

主要思想：创建一个包含不同类型的列表，并根据它们自己的模板以不同的方式呈现它们。这些模板包含到它们自己的组件的绑定。

我整理了一个最小的示例，但不幸的是我无法将它放在 plunker 中，它不起作用，所以这里是代码的主要部分。

小示例代码概述：我有一个空数组和一个按钮，当我单击此按钮时，会创建 2 个组件并将其插入到列表中。列表中的这些组件使用它们自己的自定义模板（例如：comp-a.component.html）呈现。这一切都有效：

顶级html代码：

顶级组件代码：

示例组件“A”（B实际上相同）：

组件拥有 html 模板（再简单不过了）：

如您所见，“title”成员有一个初始值，但在 click() 方法中，我调用组件的“init”方法，并尝试设置一个新值。问题是，数据绑定有效，但它没有更新，因此列表使用“A 的初始值”字符串呈现，并且 newValue 只是在后面的代码中设置，但页面没有更新。同时，“staticBindingMemberValue”的更新有效：

这是点击按钮后的样子

我阅读了许多动态实例化组件的方法，我可能会误解一些东西，所以我的问题是：

Angular 6 还没有办法让这个极其简单的动态组件创建工作吗？

我怎样才能使它工作，所以当组件创建后发生某些事情时（调用单击方法，某些服务从服务器获取数据等......），绑定会更新：

• 我应该使用另一种方式来动态创建组件？

• 我应该以不同的方式创建数据绑定？

谢谢

[更新]

好的，我找到了一种使用工厂解析器执行此操作的方法，但它并不完全相同，而且有点 hackish .. 对这种方法有什么想法吗？

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

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

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

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

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

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

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

提前感谢您的任何见解！

我有一个用 ngComponentOutlet 创建的组件

和组件本身

如何设置单元测试？我们正在使用 Jest，但我认为设置应该与 Jasmine/Karma 非常相似

这是我到目前为止的单元测试

我遇到了错误：

这意味着我在创建组件时没有注入 AdminTableInfo。有谁知道如何为这种情况设置单元测试？

这是对问题的完全重写，因为它似乎写得不好。

我正在尝试使用这个包：

https://www.npmjs.com/package/ng-dynamic-component

用于带有 ngFor 循环变量的动态组件 @Input()。

该包的作者已经回答了一个似乎可以解决我的确切情况的问题。但是我没有让它像答案中建议的那样工作：

TabContainerComponent 的 tabComponents -array 是这样的：

并且所有动态选项卡组件都有：

根据文档，我应该添加 ndcDynamicInputs:inputs 如下所示（而不是在 html 中内联：

问题是如何在 ts 类中定义输入数组：

那么如何将How to assign value of *ngFor 循环变量的值分配给角度动态组件的@Input 属性呢？

如果它与某人的问题重复，我很抱歉。但是我找不到我的问题的解决方案。

Angular 7. 我需要通过 将我的变量输入@Input到 ng-container 中ngComponentOutlet。正如文件所说，有一个选项可以通过Injector. 如果它只是 a stringor也没关系number。但是我有一点复杂的事情：如果我想在注入类时有更复杂的逻辑怎么办：例如绑定一个Observable<SomeModel>我想从ngrx商店获取的？或者订阅它？

在这里，我遇到了以下问题：Cannot read property 'select' of undefined。

我究竟做错了什么？

我需要@Input()为我的ngComponentOutlet.

但似乎 Angular 没有这个功能。相反，我想在我的出口组件中传递的所有东西都应该通过Injector.

如果我想在可注射类中启动我想要提供的东西，那很好。但我需要更深入地研究并Observeble<number>在创建 Injector 步骤时提供某种可观察变量（例如类型）。但我无法在出口组件内获得可观察的变量。收到以下错误：NullInjectorError: No provider for [object Object]!。

这是一个代码示例，我从 angular 文档 ( angular.io/api/common/NgComponentOutlet ) 中获得了这种模式并进行了一些修改：

那么我怎样才能$suffix在出口组件中获取和订阅这个变量。

PS如果我提供NgTemplateOutletCompleteExample到deps阵列中并NgTemplateOutletCompleteExample.suffix$进入可注射组件Greeter- 它会起作用。但问题是我有很多NgTemplateOutletCompleteExample组件，这对我来说是无效的。