Angular 5：如何在目标组件中获取跳转的来源路径？

嗨，我来帮你搞定这个问题！你需要让同一个ContactoPopupComponent根据触发它的原始视图表现出不同行为，其实有几种实用的方案，我给你详细拆解下：

方法1：直接通过ActivatedRoute获取当前路由路径 #

这是最直接的方式，毕竟你的两个路由路径本身就不一样（contacto-new-from-a和contacto-new-from-b），只要在组件里拿到当前路由的路径就能区分来源。

步骤如下：

1. 首先在组件中注入ActivatedRoute：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) { }

2. 在组件初始化时（比如ngOnInit钩子）获取路由信息：

ngOnInit(): void {
  // 方式一：获取路由配置里的path字段
  const routePath = this.route.snapshot.routeConfig?.path;

  if (routePath === 'contacto-new-from-a') {
    // 执行来自A视图的专属逻辑
    this.handleViewABehavior();
  } else if (routePath === 'contacto-new-from-b') {
    // 执行来自B视图的专属逻辑
    this.handleViewBBehavior();
  }

  // 方式二：获取完整的URL段（如果路径有嵌套的话更适用）
  // const currentFullPath = this.route.snapshot.url.join('/');
}

private handleViewABehavior(): void {
  // 这里写A视图触发时的代码
}

private handleViewBBehavior(): void {
  // 这里写B视图触发时的代码
}

如果你的组件存在路由复用的场景（比如同一个弹出组件可能被多次导航），还可以订阅route.url的变化来实时响应：

ngOnInit(): void {
  this.route.url.subscribe(urlSegments => {
    const currentPath = urlSegments.join('/');
    // 根据路径切换行为逻辑
  });
}

方法2：给路由添加自定义data属性（更推荐） #

这种方式的可维护性更高——哪怕以后你修改了路由路径，只要data里的标识不变，组件逻辑完全不用动，非常优雅。

先修改你的路由配置，给每个路由加上专属的data字段：

{ 
  path: 'contacto-new-from-a', 
  component: ContactoPopupComponent, 
  outlet: 'popup',
  data: { triggerSource: 'viewA' } // 自定义来源标识
}, 
{ 
  path: 'contacto-new-from-b', 
  component: ContactoPopupComponent, 
  outlet: 'popup',
  data: { triggerSource: 'viewB' } // 自定义来源标识
}

然后在组件中读取这个data：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) { }

ngOnInit(): void {
  const source = this.route.snapshot.data['triggerSource'];
  
  switch(source) {
    case 'viewA':
      this.handleViewABehavior();
      break;
    case 'viewB':
      this.handleViewBBehavior();
      break;
    default:
      // 处理未知来源的默认逻辑
  }
}

同样，如果需要监听路由数据的变化，也可以订阅route.data：

this.route.data.subscribe(data => {
  const source = data['triggerSource'];
  // 实时切换行为逻辑
});

方法3：通过导航时传递查询参数 #

如果你的场景允许，也可以在触发导航时附加查询参数来标识来源。比如在A视图中导航时：

// 假设你已经注入了Router
this.router.navigate(
  [{ outlets: { popup: ['contacto-new-from-a'] } }], 
  { queryParams: { source: 'viewA' } }
);

在B视图中导航时：

this.router.navigate(
  [{ outlets: { popup: ['contacto-new-from-b'] } }], 
  { queryParams: { source: 'viewB' } }
);

然后在组件中获取查询参数：

ngOnInit(): void {
  const source = this.route.snapshot.queryParamMap.get('source');
  // 根据source值处理对应逻辑
}

不过这种方式不如路由data优雅，因为查询参数会暴露在URL中，而且如果路由路径和参数不匹配的话容易出问题，所以只推荐在特殊场景下使用。

总结 #

我个人最推荐方法2（路由data属性），它既清晰又易于维护，完全不需要依赖具体的路由路径字符串。如果只是临时需求或者确定路由路径不会变更，方法1也足够简单好用。

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