Angular - 路由器配置 - 使用参数/变量段重定向到答案

【问题标题】：Angular - Router Config - redirectTo using parameters/variable segmentAngular - 路由器配置 - 使用参数/变量段重定向到
【发布时间】：2017-12-02 01:56:11
【问题描述】：

在下面的示例路由配置中，我收到一个错误：无法重定向到“/ip/:id”。输入 localhost:8080\sso\ip\1 时找不到 ':id'。我试图了解如何使用路径的可变段进行重定向。在这种情况下 :id 似乎无法找到。我引用了https://vsavkin.com/angular-router-understanding-redirects-2826177761fc，它描述了一个类似的用例，其中在redirectTo 属性中使用了动态段。

id 是否使用启动的 /sso/ip/:id 路由中的 :id 参数解析？有人问过类似的问题，但从未回复：https://groups.google.com/forum/#!topic/angular/Mw0N3qYphO8。

非常感谢任何帮助？

const appRoutes: Routes = [
  { 
      path: 'ip',
      children: [
        {
          path: ':id',
          children: [
            {
              path: 'tcv',
              component: IpTcvComponent          
            },
            {
              path: '',
              component: IpComponent          
            }
          ]
        },
        {
          path: '',
          component: IpHomeComponent          
        }
      ]
  },  
  { 
    path: 'sso',
    children: [
      {
        path: 'ip',
        children: [
          {
            path: ':id',
            children: [
              {
                path: 'tcv',
                pathMatch: 'full',
                redirectTo: '/ip/:id/tcv'
              },
              {
                path: '',
                pathMatch: 'full',
                redirectTo: '/ip/:id'
              }
            ]
          },
          {
            path: '',
            pathMatch: 'full',
            redirectTo: '/ip'
          }
        ]
      }
    ]
  }
];

【问题讨论】：

你能显示你用来重定向到这条路线的代码吗？
@DeborahK 我认为这一切都在路由配置中。当用户转到/sso/ip/:id 时，OP 希望使用与提供给原始路径的:id 相同的值重定向到/ip/:id。然而，似乎路由器试图寻找文字路由 /ip/:id（不替换 id 值），因为 :id 只是一个参数，所以该路由不存在
我假设有一个 routerLink 或 .navigate() 方法正在执行此操作。我希望看到该代码以了解该过程是如何完成的。或者可能被误解了......用户是否在地址栏中输入了路径？
@BettleJuice，你搞定了我想做的事。浏览器用于执行路由。我输入 localhost:8080/sso/ip/1 并期望被重定向到 localhost:8080/ip/1。仅使用路由配置，没有使用 Angular 路由器的 javascript。我正在整理一个示例应用程序，因为我的原始应用程序要大得多，并且会分散手头的问题。
@DeborahK。创建了一个 Plunker 来演示这个问题。如果单击 SSO IP 组件链接，则会将错误写入控制台。 Plunker

标签： angular router

【解决方案1】：

如果我无法让路由配置工作，我的方法是手动处理重定向。有一个 RedirectService 和一个 redirectInFlight() 方法来监听 Router.events observable。当路由器尝试去/sso/ip/:id等目标路径时，透明重定向到正确路径：/ip/:id

然后我会将服务添加到AppModule.providers，将服务注入AppComponent，然后调用redirectInFlight()

应用组件

@Component({
    templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {

    //inject the RedirectService
    constructor(private redirectSvc:RedirectService){}

    //start listening to the router and redirecting
    ngOnInit() {this.redirectSvc.redirectInFlight();}
}

重定向服务

import {Injectable} from '@angular/core';
import {Router} from '@angular/router';
import 'rxjs/Rx'; //replace with just the classes you need from RxJS library

@Injectable()
export class RedirectService {
    events$:Observable<any>; //stream of Router events

    constructor(private router:Router) {
        this.events$ =
            //listen to router events and inspect the `url` string property
            //and filter for urls that begin with /sso
            this.router.events.filter(e=> e.url && e.url.startsWith('/sso'))
    }

    redirectInFlight(){
        //First remove /sso from the start of url to fix it
        this.events$.map(e => e.url.replace('/sso',''))
            //navigate to the fixed URL
            .subscribe(newUrl=>this.router.navigateByUrl(newUrl));
    }
}

最后，您可以从路由器配置中删除整个 sso 路径及其子路径，大大简化了它。

Live demo

注意：此实现是一个起点。您可以通过存储和引用重定向映射来使其更健壮，而不是硬编码“/sso”。

【讨论】：