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内获得对这些链接和图像（以及可能的其他元素类型）的引用？

阅读this post表明以下内容：

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

一个很好的解决方案是利用中的选择器   @Directive装饰。您只需定义一个选择的指令   ＆LT;李＆GT;元素，然后使用@ContentChildren查询过滤所有＆lt; li＆gt;   元素只限于那些满足孩子的孩子   成分

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

还有其他方法吗？或直接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是否匹配。

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

1 个答案: