问题标签 [angular-content-projection]

说，我有一个<hook>以编程方式创建子组件的组件，我如何将内容（Angular 将呈现到<ng-content></ng-content>in hook 的模板中）作为 ng-content 传递给该子组件（可能会或可能不会决定显示它）？

我找到了一个关于内容投影的非常有用的解释，它展示了如何将投影内容传递给以编程方式创建的组件，这是我的问题的一半。对我来说缺少的链接仍然是：如何访问传递给的内容hook以传递它。

假设我有一个如下组件：

哪里my-typical-form.component.html是：

和child-in-content.component.html和child-in-content.component.ts如下：

正如您在StackBlitz中看到的那样，myForminapp-child-in-content为空。但是，我的理解是，既然child-in-content是（种）孩子，NgForm我可以通过 DI 拥有它。由于内容投影，这显然不起作用。

那么，有没有办法在app-child-in-content组件中获取 NgForm（编辑：之前ViewInit）？

我知道可以有多个ng-content具有不同选择器的 's 将内容投影到插槽中。例如

我的问题是，是否可以在同一个实例上有多个选择器，例如ng-content

类似于如何为多个选择器使用相同的规则 CSS，即

我有两个角度组件和Parent扩展组件。这是为了利用父组件实现的一些通用功能。ChildChildParent

同时模板，通过选择器Child引用模板，用于将一些内容投影到. template 在子模板周围提供了一些常见的包装标记。Parent<ng-content>ParentParent

这很好用，尽管我对 Component 类和引用Parent类和模板的模板都不太满意。

这种安排会不会有什么陷阱？

这是一个实现。https://stackblitz.com/edit/angular-y5m5fg

假设它们是 2 个组件。父组件 page和子组件field。我想将inputhtml 标记/元素从传递page到field使用内容投影。然后在field组件内部我想修改传递的inputhtml 元素属性。例如，将字段最大/最小长度设置为硬编码长度并将（模糊）事件绑定到函数。

代码示例。

在 page.component 中：

在字段组件中：

我试图做这样的事情（显然没有奏效），但希望它能让我的观点更清楚

注意：我找不到如何做到这一点的方法/技术/模式。搜索像上面的标题这样的词只会将我引导到教授如何使用内容投影或高级用例的文章，而这不是其中的一部分。也许我找不到正确的术语来搜索它。如果是这样，请告诉我这个过程的名称是什么。提前致谢。

我有一个共同的模式，其正文/内容会有所不同

HTML

TS

但是当我尝试打开模式时，结构指令不起作用。我如何使用 *ngIf 和 *ngFor 内部内容投影

这是我的父组件 html

这是我的 CardComponent

所以我想访问<div class="body">This is body</div>CardComponent 中的这个元素（），如果它是一个组件，我可以通过 ContentChild 访问它，但是如何访问它呢？

我尝试使用模板变量（在 ContentChild 中传递变量名）并尝试从 ngAfterContentInit 获取未定义的形式访问它

我想在库中的 Angular 8 中创建一个 TabComponent。所以我希望最终用户像这样使用我的组件：

在我的<tab-view>组件中，我有这样的代码：

问题是，我怎样才能在我上面写的地方代表我的标签药片和内容？

有没有办法<ng-content>在评论的地方使用？

解决方法：我已经研究过这个解决方案，但这并不是我想要的。

• 我有一个 Angular 8.2 项目，它有两种不同的显示模式（横向|纵向）
• 在每个内部，顶部和底部都有一个工具栏，围绕着主要内容。
• menu以及主要是特定于模块的content，因此我正在使用插槽。换句话说：五分之一的不同可能的父组件使用这个组件并提供main内容和一个（个体不同）menu，使用角度内容投影。

问题：我怎样才能使用一个插槽两次？** 如果我使用例如..不会出现错误

...但是，插槽 get 仅在最后一次“选择一次”（两个 A 之间的标签仍然为空）。换句话说，我的第一个.global-ui-top仍然是空的。

注意：这ng-detour在第 1+2 行有助于解决某个错误。是不会造成伤害，但也没有帮助（遗憾的是ng-template-contents 在“第一次填充”之后不会被冻结）。显然，关于插槽有一个“选择的唯一性”原则。

有没有办法将菜单槽的内容填充到任何类型的模板中，并多次重复使用它（同时都可见）？**

• 也许是一个花哨的旗帜<ng-content>或<ng-template？（“静止的”？！？）
• 或者首先以某种方式将插槽的内容打入@viewChild()（在component.ts中）......
• 别的...？

小更新

似乎可以将 ng-template 引用捕获到 View Child 中：

...aconsole.dir()向我展示了一个有效的 ElementRef，但我无法在 .html-Template 中输出它，即<ng-template [ngTemplateOutlet]="menuA"></ng-template>

我正在寻找一种方法来获取disabled投影的属性<ng-content> input。因为能够相应地更改宿主元素的行为。

此外，我不认为重复condition作为@Inputfor是一个好主意<host-cmp>，即使它让生活更轻松......

我最终得到的解决方案（到目前为止，搜索了很多......）如下：

1. 为输入创建一个指令，获取属性MutationObserver
2. @ContentChild在主机内部获取此指令。

它工作得非常好，但我有疑问......对于这样的任务来说是不是太“重”了？也许，我错过了一些东西，这可以以更 Angular 的方式完成？