如何结合router-outlet使用@ViewChildren/@ContentChildren捕获指令？

问题分析 #

你遇到的核心问题是：router-outlet动态加载的组件不属于根组件的内容投影或直接视图树范畴，所以根组件用@ContentChildren或@ViewChildren无法捕获到这些组件内的AnchorDirective。而在组件内部使用@ViewChildren能正常工作，因为指令属于该组件的视图树。

另外你不想用服务传递数据的思路是对的，那种方式确实容易引发变更检测错误，也不符合组件解耦的最佳实践。下面提供一种直接从根组件获取路由组件内指令的可行方案。

解决方案步骤 #

我们可以通过router-outlet的activate事件获取激活的组件实例，再从实例中直接获取其内部的指令列表，具体实现如下：

1. 定义接口规范
   先创建一个接口，让所有包含锚点指令的路由组件实现它，确保根组件能统一访问指令列表：

import { QueryList } from '@angular/core';
import { AnchorDirective } from './anchor.directive';

export interface HasAnchors {
  anchors: QueryList<AnchorDirective>;
}

2. 在路由组件中实现接口
   在每个包含appAnchor指令的路由组件里，用@ViewChildren获取指令列表，并实现HasAnchors接口：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { AnchorDirective } from './anchor.directive';
import { HasAnchors } from './has-anchors.interface';

@Component({
  selector: 'app-page-1',
  template: `
    <div>
      <app-component-1 appAnchor anchorTitle="Link 1"></app-component-1>
      <app-component-2 appAnchor anchorTitle="Link 2"></app-component-2>
    </div>
  `
})
export class Page1Component implements HasAnchors {
  @ViewChildren(AnchorDirective) anchors!: QueryList<AnchorDirective>;
}

3. 在根组件中监听路由激活事件
   利用router-outlet的activate事件获取组件实例，判断是否实现了HasAnchors接口，然后提取锚点标题更新左侧菜单：

import { Component } from '@angular/core';
import { HasAnchors } from './has-anchors.interface';
import { AnchorDirective } from './anchor.directive';

@Component({
  selector: 'app-root',
  template: `
    <div class="layout">
      <div class="sidebar">
        <a *ngFor="let link of menuLinks" href="#">{{ link }}</a>
      </div>
      <router-outlet (activate)="onRouteActivated($event)"></router-outlet>
    </div>
  `
})
export class AppComponent {
  menuLinks: string[] = [];

  onRouteActivated(component: any) {
    // 检查组件是否实现了HasAnchors接口
    if ('anchors' in component) {
      const anchorComponent = component as HasAnchors;
      // 订阅指令列表的变化，确保菜单能实时更新
      anchorComponent.anchors.changes.subscribe(() => {
        this.updateMenu(anchorComponent.anchors);
      });
      // 初始化更新菜单
      this.updateMenu(anchorComponent.anchors);
    } else {
      // 如果组件没有锚点，清空菜单
      this.menuLinks = [];
    }
  }

  private updateMenu(anchors: QueryList<AnchorDirective>) {
    this.menuLinks = anchors.map(anchor => anchor.anchorTitle);
  }
}

为什么这个方案可行？ #

• activate事件会在路由组件完全加载并完成初始变更检测后触发，不会引发ExpressionChangedAfterItHasBeenCheckedError。
• 根组件直接从激活的组件实例获取指令列表，不需要中间服务传递数据，符合组件间通信的直接性要求。
• 通过接口规范约束路由组件，保证了代码的可维护性和一致性。

额外提示 #

如果你的路由组件可能动态添加/移除带有appAnchor指令的元素，订阅QueryList的changes事件能确保菜单实时同步这些变化，这也是代码中加入subscribe的原因。

内容的提问来源于stack exchange，提问作者Arnaud Denoyelle