我成功地<ng-content></ng-content>用来在孙子中显示一个组件，如下所示：Father-to-son component tree with guest component，但现在我想@ContentChild在那个孙子中使用来访问传入的内容，但我似乎不能让任何工作。

这是我@ContentChild在 stackBlitz 中使用选择器的尝试： https ://stackblitz.com/edit/angular-dpu4pm 。无论我做什么，@ContentChild在 TheChild 组件中始终未定义，但在 TheParent 组件中有效。

任何有关如何使这项工作的建议，或任何其他从孙子访问祖父母的方法都将不胜感激。

我正在构建一个包含多个动态面板的页面，每个子面板都有相同的 HTML，所以我创建了一个父面板组件来包装每个面板。

问题是我想将孩子的事件发送到面板，但我似乎找不到答案。这是我到目前为止所拥有的：

我可以创建一个共享服务，但将布尔值从子级传递给父级似乎有点过头了。

有任何想法吗？

谢谢

我尝试制作一些可以为我的应用程序协同工作的组件。

简短说明：

我的目标是在tile组件上设置一个属性，然后在子组件中使用该属性。我ng-content在tile组件中使用，因此我可以按正确的顺序放置子组件并能够自动绑定属性，因此我不必在使用这些组件的任何地方都这样做。

我看过这篇文章，但我不喜欢我必须手动绑定 HTML 中的所有属性app.ts，因为我必须在任何我想使用它的地方都这样做。

我已经添加showFilters="showFilters"或尝试[showFilters]="showFilters"了ng-contentwhich 不起作用，因为它会说它showFilters不是ng-content.

有没有办法做到这一点，所以我在使用组件时不必一直设置它。有什么事情@ContentChilds或事件？

我希望它的工作方式是，当我单击tile-filters组件中的按钮时，它会关闭并tile-search更新，因此它将占据全宽。当我然后单击一个按钮时，tile-search它应该tile-filters再次显示并且两者共享空间。（将来我想添加更多具有相同属性的组件）

下面是组件或工作Plunker的示例。

瓷砖.ts

平铺过滤器.ts

平铺搜索.ts

并将它们放在一起 app.ts

我试图通过使用将我的依赖项的搜索限制在它的主机上@Host。

但它在没有ng-content或嵌入的情况下不起作用。

下面的代码不起作用（没有 ng-content）

使用 ng-content 现在只需更改模板RootComponent&ParentComponent上面的代码开始工作

问题：

1. 为什么第一个代码不起作用（没有 ng-content）..？
2. @Host 只能与 ng-content 一起使用..？
3. ng-content 的不同之处在于编译后的 HTML 的结构在这两种情况下是相同的。

以下是 Plunker 供参考：

不工作

ISSUE:

@ContentChildren does not seem to work on Parent <ng-content> containers. Even if the content is a child of the component.

Plunker: https://plnkr.co/edit/J5itJmDfwKwtBsG6IveP?p=preview

NOTE: I Am using {descendants: true}

Example Code:

Main HTML:

Child Component:

Parent Component:

Problem The length of the test component is 0 for the child component, but 3 for the parent component.

Detailed Code:

plnkr 演示在这里

我想有条件ng-content的，比如

angular2 有可能吗？

我正在尝试在 Angular 中构建一个可以在内部渲染不同组件的组件；它就像一个动态表格，因此当用户单击该行时，它会展开以显示某些内容；取决于某些东西，理想情况下是任何东西。

所以，我正在尝试使用 ng-content，但它并没有像我预期的那样工作。我试图将它减少到我想要的plunker中的最小功能。

基本上，我有一个父组件（my-parent），它是一个表格并显示行列表，但对于每一行，我还希望在下面显示另一行，其中包含其父级投影的组件内容。

我的应用组件

我在 my-parent 中投影 4 个组件，每行一个。

然后在我的父母

在这里，我显示所有行，并且我希望每一行也有它的相关行波纹管。

最后，my-child 组件

这实际上做了一些事情，它显示表中的所有行，然后投影所有组件

但我想这样显示

我理解我这样做的方式没有多大意义，因为我没有告诉 Angular 在哪里显示每个投影组件，但是我尝试了ng-content select它但它不起作用，因为我的选择必须是动态的，比如ng-content select="#{{d.name}}"和使用<my-child id="{{r.name}}"></my-child>

我读过有关使用模板和东西的信息，但老实说，我无法理解它。任何人都愿意看看plunker并提出一些建议吗？

谢谢

我正在尝试开发一个轮播。

期望的最终结果应该是开发人员只需将整个标记写在一个地方（比如说 in app.component.html），只有一个options属性，然后轮播将接管。

问题是carousel.component我需要设置一些属性carousel-item.component（属性app.component应该与......但所有标记都在app.component.html）。

我怎样才能做到这一点？

app.component.html:

carousel.component.html:

carousel-item.component.html:

我是 angular2 的新手，我正在尝试制作一个名为“ grid ”的小角度组件，它只是使用嵌入重新排列其内容。

它的模板

网格组件模板 (grid.component.ts)

这是使用它的父组件的一部分。

父模板

这是一个Plunker。

但结果显示没有内容。但是使用...

它工作正常，结果如我所料。

最后一个工作案例的Plunker 。

可以使用 ngfor 或类似工具来实现此结果。

我尝试使用 nth-child css 伪类来避免使用索引，但它也不起作用。

更新

我根据@yurzui（谢谢！！）的回答取得了一些进展。它允许将具有 grid-item-index 值的内容映射到具有相同grid-item-index值的视图容器。

父组件.html

网格项索引指令

网格组件.ts

检查这个Plunker

目标是从列表中动态加载组件并将它们与关联的选项卡一起显示。 我制作标签的方法基于本教程：https ://juristr.com/blog/2016/02/learning-ng2-creating-tab-component/和

如果您只想通过将每个组件包装在选项卡中来对每个组件进行硬编码，这将非常有用。遗憾的是，这种方法在尝试动态加载 ng-content 中的组件时失败了。

我确实看到了 yurzui 的这个答案，Creating a angular2 component with ng-content dynamic这与我想要完成的非常接近。

下面的这段代码（见上面的链接）是我无法弥合这个例子和我之间的差距的地方。在我的示例中，我不知道要传递给 createComponent() 的参数。以及将这段代码放在哪里，目前我有 createTab 指令来保存这段代码。如果我应该将指令放在“tabs”元素或“tab”元素上，我会一直打开。

带回家的消息是我想将动态创建的组件代替选项卡的 ng-content。然后选项卡 ng-content 将由选项卡填充。

这是我实现这一目标的微弱尝试。http://plnkr.co/edit/ieSNgqusP0rwZBMQSvYQ?p=preview