问题标签 [angular2-ngcontent]

假设我有以下组件（我们称之为“MyModalComponent”）

我的模态组件

当我这样使用它时，它可以完美运行；

• 标题在<div class="my-modal-header">div中呈现
• 其余内容进入<div class="my-modal-body">div

但是，如果我将我的 html 包装到不同的组件中，则选择器投影不再起作用。

我的模态内容组件

现在所有的 html 代码都被渲染到 MyModalComponent 的“后备”<ng-content></ng-content>槽中（因此，在<div class="my-modal-body">div 内）。
在这种情况下，选择器似乎不再起作用。

这是“设计使然”，或者更确切地说，如果您将 html 标记直接放在 MyModalComponent 中，我如何确保它能够继续工作？

我正在构建一个步进器并使用“嵌入”ng-content来动态抓取section步进器标签中的元素。stepper.component 视图的工作方式如下：

组件用法如下所示：

但是，我想通过自动识别部分元素来使其动态化：

我怎样才能：

1. 获取可用于嵌入的部分元素的节点列表？
2. 使用 ng-contentselect来逐步定位它们？

我正在使用Angular 8

我有一个canvas元素必须显示在父组件内的不同子组件中，但其上的数据应该相同。

为了解决这种情况，我ng-content在子组件中使用了

组件A和B具有 HTML 包含

而且ParentComponent有

app-canvas-child组件具有canvas元素

canvas-child.component.html

但是在Parent组件中，它从组件显示Canvas Success标题app-canvas-child，但画布区域是空白的。直接在父组件中使用相同（在 ng-template 之外）可以正常工作并显示画布。

我的目标是在组件 2 中选择一段 HTML，它应该使用组件 1 中的数据呈现 HTML。

这是我的方法的演示伪代码：

组件 1

组件 2

希望能很好地解释我的问题。提前致谢。

我需要围绕 Angular 应用程序中的输入呈现动态内容。

我的想法是创建一个自定义组件，然后使用ng-content将行为绑定到该输入。像这样：

我的包装器将如下所示。

HTML：

和 .ts 功能：

现在，我知道它ng-content实际上并不存在，并且我不能真正对其进行引用，因为该内容可以是多个元素，但是有没有办法以“角度方式”而不是使用蛮力，即原生元素？

我想始终使用默认值<ng-content>和可选的命名 ng-content来呈现我相当简单的组件。如果那个命名的 ng-content 存在，它应该被附加的 html 包裹起来。我确实找到了一个解决方案，但令人讨厌的是我需要两个参考：

app.component.html（使用它的地方）

我的组件

header.component.html

结果符合预期，但我不喜欢我需要的两个属性：

→ 有没有更好的方法，只与一个参考/属性相处？

我需要在没有框架的情况下编写两个 Angular 组件（手风琴 > 扩展面板）。我正在使用 ContentChild 来支持手风琴组件中包含的所有扩展面板。我想要做的是解析组件以检查它们的状态并从父容器中切换更新属性的值。

现在我在每个扩展面板中都有一个事件发射器，如果每个实例是打开或关闭的，它就会发出。

我需要跟踪每个 ChildContent state$ 并在每个检查后设置一个默认值（如果有），并跟踪内部子实例切换时的任何更改，它应该将事件发送到父手风琴，以便它可以确定要使用哪个索引跟踪扩展。

我希望遍历 ChildContent 的每个实例并检查是否已打开任何实例，如果未通过更改其状态打开第一个实例。在包装器中，我订阅每个面板并在循环中检查它们是否打开，如果没有打开，我希望展开第一个孩子。

每当子面板展开时，我希望将剩余的子手风琴收缩到选定的手风琴之外。

这是内部子组件（扩展面板）

这是容器组件（Accordion）模板，让您了解这应该是多么简单......

{{accordionTitle }} {{accordionSubtitle }} /** ' * ContentChildren 将所有子组件呈现为展开状态，无论我尝试过何种方法。我已经确认事件正在被 * 分派给父级，我还看到各个面板按照我的预期切换。不能得到的是上面描述的动态互斥行为，当用户展开一个面板时，它应该收缩其余的。* 当面板单独使用时，它们应该能够独立于手风琴进行配置和使用（现在很好）。一旦我动态调整了子 * 组件状态的值，如何映射/变异/设置 * this？*/

问题是，由于 ContentChild 包装在 a 中，因此一旦使用 ContentChild.prototype.map 方法，我就无法将映射版本重新分配给它，并且我想避免手动渲染组件的开销。

扩展面板工作正常，经过单元测试，等等。手风琴和扩展面板过滤和选择让我很难过。我不断收到无限循环等，我知道我必须有一种更简单的方法来动态更新 ContentChildren，任何人都可以引导我朝着正确的方向前进吗？

那么如何从其包装组件中查询并更新 ContentChildren 呢？

https://codesandbox.io/s/silly-river-jsbuu?file=/src/app/accordion/accordion.component.ts:0-2156

映射将在 AccordionComponent.ngAfterContentInit() 中进行，但我无法使用下面链接的交互式沙箱中的方法使其工作。

谢谢！

我正在 Angular 9 中创建一组定制的表单组件。其中一个是 Account Dropdown，它在其模板中使用另一个组件 Dropdown List。下拉列表组件已经具有使用内容投影 (ng-content) 将在其实例化标记中找到的任何消息组件显示为错误消息的逻辑。我想要做的是在帐户下拉列表（祖父）中实例化一个消息组件（子），如下所示，但在下拉列表（父）中呈现消息的 html。

应用程序 HTML：

account-dropdown.component.html

下拉列表.component.html

有谁知道这是否或如何可能？

谢谢

我正在尝试使用 ContentChildren 捕获外部 ng-content 的内容，但没有成功。这是代码：app.component.html：

表包装：

桌子：

在表组件中，QueryList 是空的，我必须在 ngAfterViewInit 中手动从表包装器组件中设置它，否则表组件中的 *ngFor 不会呈现任何内容。

所以我的问题是：我如何将包装组件的 ng-content “转发”到内部组件的 ContentChildren？HTML 甚至在内部组件中呈现，只是 ContentChildren 无法获取其模板中的列。

我试图通过在父组件的内容区域内引用它来找到一种将组件嵌套在另一个组件中的简单方法。这将是父母：

然后我想像这样使用它：

我认为在自定义组件的内容区域内只接受字符串，所以这不起作用。但这似乎是一个非常通用的用例，我找不到完全做到这一点的示例，而不会使它变得非常复杂。我不是高级 Angular 用户，所以我喜欢保持简单。有没有我遗漏的文件，或者有什么建议可以解决这个问题？