Angular2：通过css类访问多个子组件之一

举例来说，如果我有这样的结构：Angular2：通过css类访问多个子组件之一

<parent-component> 
    <child-a class="a"></child-a> 
    <child-a class="b selected"></child-a> 
    <child-b class="c"></child-b> 
    <child-b class="d"></child-b> 
    ... 
</parent-component>

如何访问ChildA的实例与类我为父级“.selected”？

编辑：在为父级我有10个对象（在财产items）的列表，并在其模板我环比items阵列，并为每一个项目创建ChildA或ChildB组件（ChildA或ChildB是否依赖于一些项目中的配置）。

然后通过点击任何项目我将它标记为'selected'（items中的相应对象存储为selectedItem）。后来，我需要访问该组件，对应于selectedItem（并且有“.selected”类“）

来源

2017-02-09 eagor

目前还不清楚你在问什么。创建一个庞然大物，并澄清你的具体问题。 –

不要以为你可以通过它的课堂选择一个孩子组件，而不需要查询dom。你可以给它一个名字并使用'@ ContentChild'来选择它。例如'' – rob

@RomanC用更多的信息更新了问题。 – eagor

在父用@ContentChild或@ContentChildren

例如：。在你的情况下使用： @ContentChildren(ChildComponentA) childs: QueryList<ChildComponentA>; 和u得到了所有孩子的现在只是简单的迭代

欲了解更多信息，请点击这里：https://angular.io/docs/ts/latest/api/core/index/ContentChildren-decorator.html

编辑：您可以使用儿童ElementRef检测所选类别中，在这里，你就是一个例子：

plunkr here 正是这种做u想要做什么？

来源

2017-02-09 15:05:40 Daredzik

以及“.selected”类怎么样？ – eagor

最好的方法（现在和我）是添加属性到child-N，isSelected，并检查它当迭代trought组件查询列表 – Daredzik

@eagor我更新我的答案，我添加解决方案使用'ElementRef'它帮助你？ – Daredzik

Angular2：通过css类访问多个子组件之一

回答

相关问题