Symfony/Angular5开发：请求拦截器中获取当前激活组件的方法

嘿，我来帮你搞定在Angular 5请求拦截器中获取当前激活组件的需求！结合你的技术栈（Symfony+Angular5），这里有两种实用的方案，你可以根据自己的需求选择：

方案一：通过Router和ActivatedRoute获取当前路由组件类 #

因为拦截器属于HTTP层，直接注入ActivatedRoute容易触发循环依赖，所以我们用Injector延迟获取路由相关服务，避开这个问题：

import { Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { Observable } from 'rxjs/Observable';
import { TokenService } from './token.service';
import { Router, ActivatedRoute } from '@angular/router';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  private router: Router;
  private activatedRoute: ActivatedRoute;

  constructor(private injector: Injector, private tokenService: TokenService) {
    // 延迟注入避开循环依赖
    setTimeout(() => {
      this.router = this.injector.get(Router);
      this.activatedRoute = this.injector.get(ActivatedRoute);
    });
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 遍历嵌套路由，找到最底层的激活组件类
    let currentRoute = this.activatedRoute;
    while (currentRoute.firstChild) {
      currentRoute = currentRoute.firstChild;
    }
    
    if (currentRoute.component) {
      console.log('当前激活组件类:', currentRoute.component.name);
      // 这里可以根据组件类做你需要的逻辑处理
    }

    // 保留你原有的拦截逻辑，比如添加token到请求头
    const authToken = this.tokenService.getToken();
    const authReq = req.clone({
      setHeaders: {
        Authorization: `Bearer ${authToken}`
      }
    });

    return next.handle(authReq);
  }
}

这个方案能拿到组件的类（比如HomeComponent），如果需要组件的实例，就用下面的方案二。

方案二：通过ApplicationRef获取当前组件实例 #

ApplicationRef持有所有已经挂载到DOM的组件实例，我们可以从中筛选出当前激活的那个：

import { Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { Observable } from 'rxjs/Observable';
import { TokenService } from './token.service';
import { ApplicationRef } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  private appRef: ApplicationRef;
  private router: Router;

  constructor(private injector: Injector, private tokenService: TokenService) {
    // 延迟注入避免依赖问题
    setTimeout(() => {
      this.appRef = this.injector.get(ApplicationRef);
      this.router = this.injector.get(Router);
    });
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 获取当前路由的URL，用来匹配对应的组件实例
    const currentUrl = this.router.url;
    
    // 从已挂载组件中筛选当前激活的实例
    const currentComponentInstance = this.appRef.components
      .map(comp => comp.instance)
      .find(instance => {
        // 这里可以根据组件的特征调整筛选逻辑，比如组件有特定属性或方法
        // 或者结合路由信息匹配，比如如果组件关联了当前路由
        return instance.constructor.name === 'YourTargetComponentName'; // 替换成你的判断逻辑
      });

    if (currentComponentInstance) {
      console.log('当前激活组件实例:', currentComponentInstance);
      // 可以调用组件的方法或访问属性
    }

    // 原有拦截逻辑
    const authToken = this.tokenService.getToken();
    const authReq = req.clone({
      setHeaders: {
        Authorization: `Bearer ${authToken}`
      }
    });

    return next.handle(authReq);
  }
}

关键注意点 #

• 用setTimeout延迟注入是为了避开拦截器和路由服务之间的循环依赖，Angular初始化拦截器时，路由服务可能还没完全就绪。
• 如果你的应用有嵌套路由，方案一中一定要遍历到最底层的ActivatedRoute，才能拿到实际渲染的组件。
• 方案二的筛选逻辑需要根据你的实际业务调整，比如可以结合当前路由的URL来精准匹配对应的组件实例。

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