如何获取对Component中投影的所有元素的引用？

Question

如果我想获得对Component中投影的所有元素的引用,我该怎么办？

假设我AppComponent将一些链接和图像投影到TestComponent:

@Component({
  selector: 'test',
  template: '<ng-content></ng-content>'
})
class TestComponent {}

@Component({
  selector: 'app',
  template: `
    <test>
      <img src="http://example.org/1.jpg">
      <a href="http://example.org">Some Link</a>
    </test>
  `,
  directives: [ TestComponent ]
})
export class AppComponent {}

现在,我如何在我的内部获得对这些链接和图像(以及可能的其他元素类型)的引用TestComponent？

阅读这篇文章建议如下:

解决方案:带有li选择器的ContentChildren +指令

一个很好的解决方案是利用@Directive装饰器中的选择器.您只需定义,用于选择<LI>元素指令,然后用@ContentChildren查询过滤所有<LI>元素降到只有那些组件的子内容.

但这只有在我想获得单个元素类型时才有效,但是如果我想获得多个类型,这意味着我必须为我想要的每种类型创建一个指令(如果我想要所有类型,那该怎么办？)......这不是一种实用的方法.

还有另外一种方法吗？或直接DOM操作是这种情况下唯一的解决方案？

Answer 1

您可以尝试在指令上使用多个选择器,如下所示:

@Directive({ selector: 'a, img' })

Angular仅允许指令在不跨越元素边界的CSS选择器上触发.因此selector可以声明为以下之一:

• element-name:按元素名称选择.
• .class:按类名选择.
• [attribute]:按属性名称选择.
• [attribute=value]:按属性名称和值选择.
• :not(sub_selector):仅在元素不匹配时选择sub_selector.
• selector1, selector2:如果选择任一selector1或selector2匹配.