title: Use @ViewChildren/@ContentChildren in combination with router-outlet
body: <p>I am trying to build this : </p>
  
  <pre><code>┌--------------------------------------------┐
  | -Page 1-   -Page 2-   -Page 3-             |
  ├----------┬---------------------------------┤
  | Link 1   | &lt;router-outlet&gt;&lt;/router-outlet&gt; |
  | Link 2   |                                 |
  | Link 3   |                                 |
  |          |                                 |
  |          |                                 |
  </code></pre>
  
  <p>The list of links on the left depends on the page.</p>
  
  <p>A typical page looks like this : </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;app-component-1 appAnchor anchorTitle="Link 1"&gt;&lt;/app-component-1&gt;
    &lt;app-component-2 appAnchor anchorTitle="Link 2"&gt;&lt;/app-component-2&gt;
    &lt;app-component-3 appAnchor anchorTitle="Link 3"&gt;&lt;/app-component-3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There are some directives <code>appAnchor</code> associated to <code>@Input() anchorTitle: string</code> . I want to automagically capture them and update the left menu.</p>
  
  <p>The problem comes when I try to query those elements through the <code>router-outlet</code>.</p>
  
  <p>So I tried :</p>
  
  <pre class="lang-js prettyprint-override"><code>@ViewChildren(AnchorDirective)
  viewChildren: QueryList&lt;AnchorDirective&gt;;
  
  @ContentChildren(AnchorDirective)
  contentChildren: QueryList&lt;AnchorDirective&gt;;
  
  ngAfterContentInit(): void {
    console.log(`AppComponent[l.81] contentChildren`, this.contentChildren);
  }
  
  ngAfterViewInit(): void {
    console.log(`AppComponent[l.85] viewChildren`, this.viewChildren);
  }
  </code></pre>
  
  <p>but I always get some empty <code>QueryList</code> : </p>
  
  <blockquote>
    <p>QueryList {dirty: false, _results: Array(0), changes: EventEmitter, length: 0, last: undefined, …}</p>
  </blockquote>
  
  <p>I also tried : </p>
  
  <pre class="lang-js prettyprint-override"><code>@ContentChildren(AnchorDirective, {descendants: true})
  @ContentChildren(AnchorDirective, {descendants: false})
  </code></pre>
  
  <p>Finally, I tried to query the elements at the last moment with : </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;router-outlet (activate)="foo()"&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>Note : I don't want the children component to send data to the parent component via a service because it causes some <code>ExpressionChangedAfterItHasBeenCheckedError</code> and <a href="https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4" rel="noreferrer">is considered as a bad practice</a>. I would really prefer to query the links directly from the parent component.</p>
  
  <p>EDIT : Here is a <a href="https://stackblitz.com/edit/angular-bcn1hd" rel="noreferrer">stackBlitz</a> showing the problem. If a <code>@ViewChildren</code> is used inside the component, everything works. But if the <code>@ViewChildren</code> is used from the root component, it fails.</p>