问题标签 [angular-content-projection]

我有一个工作的角度应用程序。我想将它与生成静态页面的内容管理系统集成，但为此我需要使用index.html页面中的内容投影。

像这样的东西：

然后，组件通过在其模板中app-root包含以下内容来实现内容投影：<ng-content></ng-content>

唉，事情似乎不像我想要的那样工作。编译并启动应用程序后，渲染结果如下：

• 外部内容投影：1111

这是我的问题：

• 是否可以像上面的示例一样从角度应用程序外部使用内容投影？
• 如果是，如何？如果不是，为什么？

编辑：在一些评论中，我被问到为什么我想要这样的东西。原因如下：我的 Angular 应用程序提供了可配置的组件来实现财务回溯测试模拟。这包括获取历史报价、运行模拟并在图表中显示结果。我想显示在 WordPress、Dokuwiki 甚至是某些 Apache 实例提供的静态页面等环境中运行的模拟。这可能是一个例子：

我有一个元素应该与其内容div的形状和大小完全相同。icon我正在 Angular 9 中设计一个组件，它是一个可以将您导航到上一页的按钮。我希望这个组件是可重用的，所以它里面的图标元素必须是可变的。我通过 Angular 的内容投影轻松实现了这一点，但问题是 div 外部容器实际上大于其内容，导致图标区域被真正的“可点击”区域溢出。

这是html页面

没有内容投影，html 页面看起来像这样（我认为我的问题超出了 Angular 内容投影）

display: inline-block，正如这里所建议的那样，不起作用。

我有一个 div 列表，每个都有一个图标、一些文本和另一个必须在右侧的图标（一个圆圈）。为了实现这一点，我设置了margin-left属性，但当然边距是根据文本长度计算的，而不是根据父 div 位置计算的。所以它导致右边的圆圈没有对齐。我使用字体真棒图标包。

图像中显示的内容是通过循环获得的，该循环为每次迭代生成一个<app-item-icon>组件

由于该属性，第二个<i>标签具有以下两个 css 类之一。ngClass恕我直言，这就是我的问题所在

这是 html 文件<app-item-icon>：

我正在使用带有content-projection 的Angular框架。指令将被渲染模板上的容器替换。第一个捕获左侧的第一个图标，而第二个捕获导致 mi 问题的文本和圆圈图标。<ng-content><div>ng-contentng-content

这是css<app-item-icon>

到目前为止我尝试过的：

1. float: right在圆圈图标上：完全没有效果；
2. position: absolute在圆圈上：这确实有效，但出乎意料的是，图标变得垂直不居中，略微向上移动；
3. text-align: end对容器类：没有影响；
4. 在圆圈上设置margin-right而不是左侧：没有效果，因为我认为它们的右侧没有任何元素；

关于 ANGULAR：我不知道为什么，但是使用浏览器检查工具，我注意到圆形图标设置了::before伪元素。我认为这是由于 Angular 内容投影。也许找到解决方案会有所帮助

Angular ngTemplate、ngTemplateOutlet、ngContent：选择模板的内容

我有 2 个组件：( AppComponent)<app></app>和ModalComponent( <modal></modal>)。除了：

• ModalComponent杠杆作用NgContent
• AppComponent在其标记中有一个模板

预期行为

其中的每个孩子都[#tpl]被投影到每个反映孩子的类名的ng-content地方。[select]

问题

没有任何内容获得项目，但有 1 个例外：

• 如果我添加class="modal template"到ng-container并添加ng-content，[select]=".modal.template" 那么它可以工作，但只能批发。也就是说，整个模板内容被投影到单个插槽中。

此外，如果您div#whatTheWhat在 DOM Inspector 中查看，您会看到模板的每个子代都成为#whatTheWhat. 这必须意味着内容投影发生在“输出”模板之前。

额外的

我们在 Angular 10 上，但我相信我在 Angular 7 应用程序中几乎完全准确地编写了这段代码（并且运行良好），但自 Angular 8+ 以来可能发生了一些变化。

显然，考虑到“问题”（上图）下的“例外”，我可以将我的模板分成它的每个子级，化class多个ng-containers 以反映每个ng-conent的select离子，并投射内容。如果你已经读到这里，你可以假设这不是我想要的。

问题

有没有办法“将select特定的模板内容积极地投射到另一个组件中”？即使使用原生 HTML 元素（例如<template>和<slot>），你能想出一种方法来实现这一点吗？

我正在尝试使用模板出口在 mat-select 中传递#tmp，但我无法显示选择选项。下面是我的代码和 stackblitz 的链接

https://stackblitz.com/edit/angular-mat-select-with-ngmodel-mujorn?embed=1&file=app/select-overview-example.ts

考虑这种简化的情况，我们有：

父组件模板（选择器：'parent'）：

子组件模板（选择器：'child'）：

用法，页面某处：

在 onBlur() 事件中发出后，我想valueEmittedFromParentInputOnBlurEvent在我的组件中进行处理。child如果可以，请你帮助我 ：）

我在使用内容投影对嵌套动态组件进行更改检测时遇到问题。更改检测不会在子组件上自动触发，我必须为每个操作添加手动更改检测。

这里的一个例子：https ://stackblitz.com/edit/angular-ivy-k2z661?file=src%2Fapp%2Fapp.component.ts

如您所见，如果单击按钮，则什么都不会显示，但是在this.cdr.detectChanges()add() 函数上添加行时，会显示内容。另外，你可以注意到我没有使用 ChangeDetectionStrategy.OnPush

有没有办法在不到处添加手动更改检测的情况下实现这一目标？

我想测试一个 Angular 组件并将 contentChild 替换为 Mock。我遵循了本指南：https ://medium.com/angular-in-depth/angular-unit-testing-viewchild-4525e0c7b756 该指南适用于 viewChild，但我认为这也适用于内容儿童。

我的 contentChild 有一个父订阅的 Observable。如果我用真正的孩子测试代码，它就可以工作。如果我嘲笑孩子，测试就行不通。我认为我在测试中查询以发出新值的子模拟是一个不同的实例，而不是父订阅的那个。

我的父母：

我的模拟：

和测试：

如何对使用另一个组件的组件进行单元测试，该组件使用 ng-template 的内容投影？由于它是一个单元测试，我想省略其他组件的声明。

这是一个例子：

我有父组件。在它里面我正在投射一个输入。

所以我有这个控制

现在我找不到从我的 AppFormFieldComponent 访问注入 formControl 的内容的方法。

我尝试使用 HTML

TS

但它给了我不确定的。

我怎样才能访问这个表单控件，以便我可以知道在我的组件的输入中输入了什么？