问题标签 [angular2-ngcontent]

我的简化目标是构建一个组件，它是一个带有项目模板的列表。例如：

这是我的代码：

预期结果：

• 物品
• 物品
• 物品

实际结果：

•<br> •<br> • 项目

定义一个简单的组件如下：

像这样使用它时：

如果模型在父级中未定义，我仍然会收到模板绑定错误，因为它即使使用ngIf=false. 为什么会这样？

我的问题是关于检查<some_selector><ng-content select='some_selector'>在父组件中给出了连接。也许我举个例子来澄清一下：

我们有父组件模板（editor.html）：

这是我的编辑器

在模态组件模板（modal.html）中，我们想使用这样的 *ngIf 语句：

<mfoot>如果在标签内的编辑器模板中使用了标签，我们不想显示 div.modal-footer <modal>。那么如何实现hasNgContent()方法呢？或者可能在 angular2 中有更直接的*ngIf语句，允许检测该<mfoot>标签是否在父组件标签中使用。

我尝试将 ngStyle 绑定到 ng-content，它不起作用，请参见下面的示例：

我在互联网上搜索仅找到以下解决方案，

=>来自https://plnkr.co/edit/T5CoP5qmd4nzIPAFjLNQ?p=preview

但它不能动态改变样式值。

我想要实现的是一个绑定到任意对象数组的通用组件，当每行的视图也由使用它的主组件任意定义时，它允许动态添加和删除行。

请注意，这MasterComponent是一个针对不同页面实现的任意组件，旨在自包含，而不是由任何元数据或外部源定义。

到目前为止，我拥有以下组件：

RepeaterComponent 模板：

MasterComponent 模板：

该<field-textbox>组件是一个自定义组件，我用它来封装简单的输入，其中包含一些我需要使用的附加数据。

MasterComponent包含一个对象，对于该实例，该对象如下所示：

这种方法有两个问题，我似乎无法找到解决方案。

1. ng-content当复制模板时，所有行的选择器都是相同的，这使我在渲染后ngFor只有一个嵌入点。ng-content
2. transcluded 指令中的声明中没有对row变量的引用，因此我无法正确绑定数据。ngFor<field-textbox>

有没有更好的方法来实现，RepeaterComponent这将使我创建更多MasterComponents不同的任意结构和不同模板的新工作量最少？

我正在尝试实现一个DropdownComponent，这将允许一个嵌入的按钮（或任何其他合适的元素或 Angular 组件）触发下拉，以及一个嵌入的 div 用于需要在下拉列表中显示的内容。该组件的用法如下，

DropdownComponent我需要在绑定自定义 css 类中获取对该按钮的引用。

我可以在上面的代码中添加一个 css 类，如下所示，并使用getElementsByClassName().

但是，为了提供更简单的用法，DropdownComponent我想使用origin用于嵌入内容的属性来获取对按钮的引用。像这样的东西，

有没有办法做到这一点？还是有更好的方法来做到这一点？

注意：我的下拉 html 如下，

我正在使用 Angular 2.0.1。

我有一个组件可以通过它接收任何其他组件<ng-content>——这很好用。

我遇到的问题是当我想引用注入的组件时。

如果我知道这<ng-content>只会是一个组件，我可以说： @ContentChild(MyComponent) dynamicTarget: IMyComponent;但是因为它可以是任何组件（我唯一的假设是任何注入的组件都实现了特定的接口）它变得更加棘手。

我也尝试过<ng-content #dynamicTarget'>，然后通过说来引用它， @ContentChild('dynamicTarget') dynamicTarget: IMyComponent;但这会返回未定义。

有谁知道我如何告诉 Angular 2 这个东西是一个组件的实例，以便我可以尝试在它上面调用一个函数？

为了进一步阐明用例——我有一个多步骤向导，可以将任何组件作为内容，并且我想validate在内容上调用函数（我再次假设存在于所述实例中）

我正在构建一个使用的组件，ng-content我发现当我使用:host >>>

例如 ：

谁能告诉我为什么我的.has-divider& 我的嵌套.search-link不起作用，以及为什么当我将内容放在 .scss 文件中并使用styleUrls它时不能与:host. 这是预期的还是可能的错误

理想情况下，我希望能够仍然使用嵌套的 scss 和外部 scss 文件

给定以下组件（使用选择器 my-template）：

并像这样使用它：

表单始终有效 - 即使输入无效。如何使这项工作在输入无效时表单无效？

现场演示： https ://plnkr.co/edit/lWUe6oeBk6ccsE2JxNKb?p=preview

是否可以通过 ng-content 或 TemplateRef 或类似方法来包含自定义列定义？我一直在通过站点（http://www.telerik.com/kendo-angular-ui/components/grid/）提供的 Kendo UI Grid plunker 以及Angular2 子组件作为数据进行测试，但无济于事。我也尝试过 ng-content select 但也没有。非常感谢任何帮助，谢谢！