代码之家  ›  专栏  ›  技术社区  ›  Seth

角度6路由:同一页的不同参数

  •  -1
  • Seth  · 技术社区  · 6 年前

    我有以下路线子集:

        const routes: Routes = [
      { path: '', redirectTo: 'plans', pathMatch: 'full' },
      {
        path: 'plan/edit/:id',
        component: EditPlanPageComponent,
        resolve: { plan: PlanResolver, planContext: PlanContextResolver },
      },
      {
        path: 'plan/edit/pn/:pn',
        component: EditPlanPageComponent,
        resolve: { plan: PlanResolver, planContext: PlanContextResolver },
      },
      ];
    

    你可以看到我从同一个地方 计划/编辑/ 身份证 计划/编辑/pn/ PN . 还有其他几个参数。用户正在寻找的是一些不同的方式来指向同一个页面。 这个比例不好。

    我不确定是否有机制来处理这个场景,或者我是否应该在解析器中处理这个场景。是否有用于此操作的内置工具,并且它应该由解析器处理?另一种问这个问题的方式是这样的:这可以通过重新路由或孩子来实现,还是完全错过了什么?

    我在解析器中构建的内容如下:

      resolve(route: ActivatedRouteSnapshot) {
        let id = +route.paramMap.get('id');
        let pn = +route.paramMap.get('pn');
        //Param 3, 4,5 .....
    
    
    
        // Determine which param has value
    
        //Get plan With appropriate logic based upon value
    
    
        return of(this.plan$);
    
      }
    

    编辑 为了解决一些困惑-我没有像我这样经常碰到错误 认为 我做了一些不该做的事,但却碰巧成功了。

    1 回复  |  直到 6 年前
        1
  •  3
  •   Peter Kim    6 年前

    顺序很重要,角度和第一个匹配。因此,这个简单的重新排序将解决您的问题。

    const routes: Routes = [
      { path: '', redirectTo: 'plans', pathMatch: 'full' },
      {
        path: 'plan/edit/pn/:pn',
        component: EditPlanPageComponent,
        resolve: { plan: PlanResolver, planContext: PlanContextResolver },
      },
      {
        path: 'plan/edit/:id',
        component: EditPlanPageComponent,
        resolve: { plan: PlanResolver, planContext: PlanContextResolver },
      }
    ];
    

    https://angular.io/guide/router#configuration :

    配置中的路由顺序很重要,这取决于 设计。路由器在匹配时使用第一个匹配获胜策略 路线,所以更具体的路线应该放在更不具体的上面 路线。在上面的配置中,具有静态路径的路由是 首先列出,然后是与 默认路线。通配符路由排在最后,因为它匹配 只有在没有其他路由首先匹配时,才应选择URL和。