能否监听Angular Router组件创建阶段钩子，为路由组件添加自定义directive？

你的判断完全正确，路由初始化组件的阶段可以拿到完整的组件创建上下文，不存在「编程方式创建的组件完全无法添加指令」的绝对限制，以下是可落地的实现方案：

方案1：Angular 14+ 自定义RouterOutlet注入宿主指令（最推荐） #

Angular 14 后ViewContainerRef.createComponent方法原生支持hostDirectives配置项，可以在动态创建组件时直接绑定指令，我们只需要重写默认RouterOutlet的组件激活逻辑即可：

• 首先自定义继承自原生RouterOutlet的指令，重写activateWith方法，在组件创建时注入需要的指令：

@Directive({
  selector: '[customRouterOutlet]',
  standalone: true
})
export class CustomRouterOutlet extends RouterOutlet {
  override activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver | null): void {
    // 按需判断仅给指定路由加指令
    const needAddDirective = activatedRoute.snapshot.data?.needCustomDirective;
    
    const componentRef = this.viewContainerRef.createComponent(
      activatedRoute.component as Type<any>,
      {
        injector: this.injector,
        environmentInjector: this.environmentInjector,
        // 符合条件时注入自定义指令
        hostDirectives: needAddDirective ? [YourCustomDirective] : []
      }
    );
    // 后续沿用原生RouterOutlet的生命周期逻辑
    super.activateWith(activatedRoute, resolver);
  }
}

• 路由配置中给需要加指令的路由加标记：

const routes: Routes = [
  {
    path: 'goods',
    component: GoodsDetailComponent,
    data: { needCustomDirective: true } // 标记该路由组件需要绑定指令
  }
]

• 替换模板中原生的<router-outlet>为自定义的<ng-template customRouterOutlet></ng-template>即可。

方案2：低版本Angular兼容方案 #

如果使用的是Angular 14以下不支持hostDirectives的版本，可以通过路由激活事件手动触发指令逻辑，效果和原生指令绑定一致：

• 把指令的核心逻辑抽离为公共服务/类，在父组件监听RouterOutlet的activate事件：

<!-- 父组件模板 -->
<router-outlet (activate)="onComponentActivate($event)"></router-outlet>

// 父组件逻辑
onComponentActivate(componentInstance: any): void {
  const currentRoute = this.activatedRoute.firstChild?.snapshot;
  // 仅给标记过的路由组件执行指令逻辑
  if (currentRoute?.data?.needCustomDirective) {
    // 传入组件实例、元素引用、注入器等指令所需参数
    this.customDirectiveLogic.run(componentInstance, componentInstance.elementRef, this.injector);
  }
}

内容的提问来源于stack exchange，提问作者Daren Thomas