javascript - Angular 5：获取所有 ContentChildren 的 QueryList（甚至是子组件中的）

Question

我有以下 html 结构，其中foo和bar是两个指令，并且baz是自定义组件。

<div foo>
  <div bar></div>
  <baz><baz>
  <baz><baz>
</div>

-component的 htmlbaz看起来像...

<div bar>Yada Yada Yada</div>

...并且foo-directive 看起来像这样：

// ...
@Directive({
  selector: '[foo]'
})
export class FooDirective implements AfterContentInit {

  @ContentChildren(BarDirective)
  m_bars: QueryList<BarDirective>;

  public ngAfterContentInit(): void {

    console.log('barCount:', this.m_bars.length);
  }
}

我遇到的问题是m_bars内部的长度FooDirective是 1。它只包含 的div直接子级<div foo>。然而，我希望这个数字是 3 （一个直接的孩子<div foo>和另一个div在两个 - 组件内baz）。

为什么会这样？如何解决这个问题——如果可以解决的话？

编辑 1：将ContentChildren装饰器更改为

@ContentChildren(BarDirective, { descendants: true })
m_bars: QueryList<BarDirective>;

根本没有任何作用。

标签： javascripthtmlangulardirective

Answer 1

这是不可能的，这很糟糕。有关详细信息，请参阅https://github.com/angular/angular/issues/20810#issuecomment-401341413。我将引用 tl;dr 版本以供参考：

简而言之：我们只查询组件自己的内容，而不是来自其他模板的内容。这是有道理的，因为一个模板在一个模板中形成一个命名空间 #foo 可能意味着一件事，而在另一个模板中则完全不同。名称可能相同，但含义却大不相同。