javascript - Angular 5 : Getting a QueryList for all ContentChildren (even the ones in sub components)

Question

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

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

baz 的 html -组件看起来像...

<div bar>Yada Yada Yada</div>

...以及foo -指令看起来像这样:

// ...
@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>;

根本没有任何效果。

Answer 1

这是不可能的，这很糟糕。请参阅https://github.com/angular/angular/issues/20810#issuecomment-401341413了解更多信息。我将引用 tl;dr 版本供引用:

In short: we only query component's own content, not content coming from other templates. This makes sense since a template forms a namespace #foo in one template might mean one thing and completely different thing in another template. Names might be the same but meaning quite different.