Angular-路由器配置-redirectTo使用參數/變量段

Question

在下面的示例路由配置中，我收到一個錯誤：無法重定向到'/ ip /：id'。 輸入localhost：8080 \\ sso \\ ip \\ 1時找不到'：id'。 我試圖了解如何使用路徑的可變段進行重定向。 在這種情況下，：id似乎找不到。 我引用了https://vsavkin.com/angular-router-understanding-redirects-2826177761fc ，它描述了一個類似的用例，其中在redirectTo屬性中使用了動態段。

使用啟動的/ sso / ip / ：id路由中的：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'
          }
        ]
      }
    ]
  }
];

Answer 1

如果無法使路由配置正常工作，我的方法是手動處理重定向。 具有帶有redirectInFlight()方法的RedirectService ，該方法偵聽可觀察到的Router.events 。 當路由器嘗試轉到目標路徑（例如/sso/ip/:id ，透明地重定向到正確的路徑： /ip/:id

然后，我將服務添加到AppModule.providers ，將服務注入AppComponent ，並調用redirectInFlight()

AppComponent

@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();}
}

RedirectService

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路徑及其子路徑，從而大大簡化了配置。

現場演示

注意：此實現是一個起點。 您可以通過存儲和引用重定向映射而不是對“ / sso”進行硬編碼來使其更加健壯。