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

Question

如果我想获得对投影到我的组件中的所有元素的引用，我应该怎么做？

假设我有 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建议如下:

Solution: ContentChildren + directive with li selector

One great solution is to take advantage of the selector in the @Directive decorator. You simply define a directive that selects for <li> elements, then use a @ContentChildren query to filter all <li> elements down to only those that are content children of the component.

但这只适用于我想获得单一元素类型的情况，但如果我想获得不止一种类型，这意味着我必须为我想要的每种类型创建一个指令(如果我想要所有类型怎么办？) ...这感觉不像是一种实用的方法。

还有别的办法吗？还是在这种情况下直接操作 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 匹配则选择。