问题标签 [ng-content]

我有一些来自第三方库的组件，在使用下一种方式时可以正常工作：

'lib' 和 'lib-inner' 组件代码的简化模仿：

我想创建包装组件：

当我们使用这个“wrapper-for-lib”组件时，我们只看到“默认”按钮，但看不到按钮“aaa”和“bbb”。

'lib' 组件的 ContentChildren() 找不到 ng-content 中的 'lib-inner' 组件，

有没有办法解决这个问题？

请注意，我无法更改“lib”和“lib-inner”的代码，因为它们模仿了真实第三方库组件的大小写，我无法更改。

上面代码的可行示例

相同案例和真实库组件的示例

是否有可能获得 的预处理值ng-content？我正在构建设计系统文档并希望在不重复自己的情况下显示示例代码

html：

打字稿

用法：

我所能得到的只是 ng-content/template 的角度渲染内容，而不是原始的原始模板。

我有一个应用程序，其中有一个布局。在这个布局中，我有一个 2 ng-content 的 div。我的问题是我的课程不适用

问题是什么

我正在编写一个 Angular 2+ 组件，它为其他包含的组件（作为 ng-content 标签提供）提供“修饰”。

例如：

your-component 成为 TypeScript my-component 代码中的 ContentChild。

但是，如果我能以某种方式检测到组件并询问它是否实现了某个接口（我们称之为 ICanHelpMyComponentDoItsJobBetter），那么我的组件代码可以激活某些附加功能。

我无法弄清楚如何回答“你实现了 ICanHelpMyComponentDoItsJobBetter 接口吗？”这个问题。查看 ContentChild 时在我的组件内部。如果是这样，我想将其转换为该接口实例并进行其他调用或设置其他属性。

任何帮助将不胜感激——这显然是一个高级 Angular 问题。谢谢！

附加信息（2021 年 5 月 4 日）：

由于我的 your-content 标签不包含选择器（而且我不想强迫我的用户指定一个），我无法在 TS 文件中使用 @ContentChild('xxx') 。所以这一直是个问题——我不知道如何在我的 TS 代码中把它变成一个可用的成员。

我尝试的另一件事是在 ng-content 周围创建一个 @ViewChild 元素，如下所示：

所以现在我可以在我的 .ts 文件中有这个：@ViewChild('ngContentDiv') ngContentDiv: ElementRef;

再后来，在 ngAfterContentInit() 东西全部初始化的时候，我可以问：this.ngContentDiv.nativeElement.children[0]

这就是元素——但我似乎不知道如何处理它。

显然，如果有办法将它直接放入@ContentChild，那会更好，但我仍然设法找到有问题的元素，当我检查它时，它确实是我在测试中指出的元素案子。

我已经尝试将其作为接口的实例进行转换——不走运。我尝试使用带有自定义指令的@ContentChildren，然后尝试调用它的方法——仍然没有。

这里不急，但我摸不着头脑——那个组件就在那里——如果我能以某种方式将它转换为它实现的东西，我终于可以要求它帮助促进它的呈现——显然很多人不会实现这个接口，但我不在乎那些。

在卡片组件 html 中，我有 ng-content，我将卡片项目组件放在卡片组件内。为什么在这种情况下我不能发出值？

示例 1。

如果我将 car-item 组件移到卡片组件之外，则事件发射器可以正常工作。

示例 2。

有没有办法像第一个例子一样发出价值？

我尝试创建一些选项卡组件，这些组件可以像 Angular Material Component 一样使用。

但是我所做的解决方案是不正确的并且是错误的

我用过 document.getElementsByTagName('app-tab')

这是标签组件模板

这是它使用的方式

我想访问app-tab标签属性值，但不知道如何从应用程序标签访问它，ng-content 提前谢谢你

答案

这称为内容投影

详细介绍可以看这里

https://blog.angular-university.io/angular-ng-content/

是否可以将提供者从视图组件“传递”到内容组件？

我一遍又一遍地面临这个问题，既找不到解决方案，也找不到设计上不可能的信息（文档）。

如果我在模板中有一个组件，则可以将其注入子组件的构造函数中（这当然可以）：

结果：

但是，如果我要注入的组件是其他组件视图的一部分，是否有可能实现这一点？

这种情况不起作用：

结束于NullInjectorError: R3InjectorError(AppModule)[AComponent -> AComponent -> AComponent]: NullInjectorError: No provider for AComponent!

有没有办法在 CComponent 中编写这样的提供程序（或 viewProvider），从它的模板/视图中提供可注入对象？

ngProjectAs 的价值可能最高吗？我想根据功能标志有不同的投影内容。

我努力了

和

两者似乎都不起作用。

我尝试只使用“过滤器”，但似乎有 2 个：

在同一页面上会导致问题，即使一个包含在 ngIf 中也是如此。

我想在这里实现的是我想在我的共享组件中包装有角度的材料标签组件。

所以，这是我要包装的组件：

PS：我可以在每个选项卡中显示组件：

所以，我想使用包装器来使用它：

应用程序包装器.html

TS类没有变化

应用-item.html

TS类没有变化

app-item-header.html

app-item-header.ts 类

app-item-content.html

TS 类没有变化，这可以容纳一个实际的组件

这在控制台中没有错误，但页面上也没有出现任何内容。

这是工作的stackblitz版本

https://stackblitz.com/edit/angular-wrapping-component-with-ng-content

PS：如果这是实现这一目标的最佳解决方案还是有另一种解决方案，请建议大家？

我的数据模型：

迭代模型集合我需要根据它们的类型绘制图标。一些图标可以以通常的方式被淹没，而另一些则需要特殊的规则。所以我准备了一些templates：

模板由 looped 使用ng-container：

问题

在这个容器声明中，我得到了正确的模板，但我无法捕获传递给icon模板的参数。

有什么想法可以解决这个问题吗？

附言

• 角度版本：~11.2.3
• 似乎我ngTemplateOutlet没有条件也有同样的问题，我真的很困惑为什么这种方法不起作用（我们可以在角度文档中找到类似的例子）：