问题标签 [ng-content]

我正在使用 ng-template 将内容传递给子组件，但我希望从子组件中获取所选项目的特定值

我也有一个大子组件，值从大子组件发出到子组件，然后到父组件。

虽然我可以获得选定的值，但它为完整的 ng-template 呈现相同的值

例如：如果我点击最后一个 div，所有 Selected 值都变为“3”

您可以在stackblitz下面有更好的想法

https://stackblitz.com/edit/angular-rfvkoj

编辑：我怎样才能让它呈现特定的选定值？

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

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

简单地说，我想将选择值作为输入传递给 ng-content 的组件。它应该看起来像这样：

家长：

子html：

孩子-ts：

但是当我这样做时，我收到一条错误消息

用正常的嵌入语法来做这件事，那为什么不呢？

假设我有以下组件（我们称之为“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 中，我如何确保它能够继续工作？

我想创建一个可重用的表单组件，如下所示：

该<my-form>组件如下所示：

但是，my-form组件中的表单看不到任何注入的元素，因此如果表单中的元素发生变化，则 form.valid/dirty 等不会更新

这个问题/问题已在 stackoverflow 上被问过几次，请参阅https://stackoverflow.com/questions/40843307/q-how-to-use-angular-2-template-form-with-ng-content

解决方案是将元素手动添加到表单中，例如：

}

使用此解决方法，表单可以正确更新有效/脏等属性，但是，注入元素的每次更改都会导致触发ngModelChange事件两次。在我的示例中，onChange($event)每次更改都会调用该方法 2 次

您知道如何“修复”手动添加元素的方法吗？或者有没有其他方法可以处理带有<ng-content>注入元素的表单？

我希望我的Pages个人将不同的组件从其他组件注入Pages/Components到header. 例如，我想将我的Input搜索字段注入content-component到我的header组件中。我试过了ng-Content，但这只会header在我的HTML. 问题是我header的不是每个Component单独的，它在我的app.component.

我的标题组件：

我想注入输入字段的组件：

应用组件.html：

如何从每个组件中单独注入不同的标签header（具有功能）？

我正在 Excel (VBA) 中开发一个宏，以将信息从 Excel 电子表格加载到 Internet Explorer（网址：https ://www.tarifasdepedagios.com.br/tarifas/initial ），然后单击计算按钮，然后，从 IE 获取结果到 Excel 电子表格。

如何将结果数据从 Internet Explorer 传输到 Excel？

例子：

输入数据：

• 产地：圣保罗，SP，巴西
• 目的地：巴西里约热内卢，RJ

结果：

• 距离：435,06 公里（HTML 代码中的 ID：“mat-input-3”）
• 收费：59,70 雷亚尔（HTML 代码上的 ID：“mat-input-5”）

是否可以通过getElementsbyIDVBA 获得这些结果？

错误与 HTML 代码中的“ng-content”有关？

链接 HTML 代码：https ://i.stack.imgur.com/AwoEW.png

VBA代码如下：

我有一个toolbar使用选择器将内容投影到多个插槽的组件：

当直接在父级中使用时，内容会正确投影：

内容正确显示

使用ng-templateandngTemplateOutlet将内容传递到工具栏时，它不起作用。内容是投影的，但所有内容最终都在<ng-content></ng-content>包罗万象中。

内容显示不正确

如何将通过ngTemplateOutlet项目提供的模板中的内容放到正确的插槽中？

Stackblitz 代码：https ://stackblitz.com/edit/angular-grid-toolbar?embed=1&file=src/app/app.component.html

在Angular中，是否可以做类似的事情

然后my-component让它变成

投影元素的数量和类型是任意的？每个子元素都需要放在一个 new<div class="container">中，但是子元素可以是任何类型，并且没有固定数量。

我知道还有其他想法，但我想以下面定义的方式使用ng-template,ng-content和@ContenChild()装饰器。这种想法来自于看到角材料组件的实际实现。

在这里，我有两个组件：

1. 容器组件（app-container）
2. 子组件（app-child）

我想在 app-container 中直接显示 app-child 组件的内容。

我在这里有一些相关的解决方案：https ://stackblitz.com/edit/ngtemplateoutlet-and-content-projection?file=src%2Fapp%2Fapp.component.html 。但这并不能完全满足我的要求。

需要以下 html，主要在app.component.html：

应该产生这样的输出：

我的代码看起来像这样