Question

app.routing.module.ts

const routes: Routes = [
    { path: '', component: AComponent },
    ...
    { path: 'homes/:id/:rate/:item', component: HomesComponent},
    { path: 'details/:id/:name/:product', component: DetailComponent},
    ...
]

根据客户的要求，我们需要更改两个组件的家庭路径。所以我们更新了app.routing.module.ts。

更新了app.routing.module.ts

const routes: Routes = [
    { path: '', component: AComponent },
    ...
    { path: 'homes/:id/:rate/:item', component: HomesComponent},
    { path: 'homes/:id/:name/:product', component: DetailComponent},
    ...
]

但是，由于我们在每个组件中使用的参数数量相同，我们遇到了冲突并且无法正确呈现，因为它所有条件都路由到我们已经给出的HomesComponent首先在路线列表中。

您是否有任何建议可以解决此问题，而不会影响参数的路径和数量？

Answer 1

在UrlMatcher和paths无用时使用自定义parameters

表格官方文件：当路径和路径组合时，可以提供自定义URL matcher pathMatch不够表达

在你的情况下，我会创建一个自定义匹配器。

解决方案1：

export const routes = [{ 
  matcher: homeCustomerMatcher,
  component: HomeComponent 
}, {
  matcher: detailsCustomerMatcher,
  component: DetailsComponent
}];

场景A：如果参数的数据类型不同。假设/:rate参数是数字数据类型而/:name是字符串

export function homeCustomerMatcher(url: UrlSegment[]){
 return url.length === 3 && isInteger(url[1].path * 1) ? ({consumed: url}) : null;
}

场景B：如果预先定义了/:name值。假设:/rate and :/name是相同的日期类型

在这种情况下，我们可以创建一个可能的名称值的集合/数组，并再次比较值的路径值。

const possibleNameValues = ["A","B","C"];
export function homeCustomerMatcher(url: UrlSegment[]){
 return url.length === 3 &&  possibleNameValues.includes(url[1].path)  
 ? ({consumed: url}) : null;
}

解决方案2：

将regex与UrlMatcher一起使用以匹配参数数据类型

  {
    path: 'homes/:id',
    children: [
        {
            path: ':rate',
            matcher: NumericUrlMatcher,
            component: Ratecomponent
        },
        {
            path: ':name',
            component: NameComponent
        }
   }

现在您的客户匹配器功能应该更新为

 export function NumericUrlMatcher(url: UrlSegment[]) {
    const regex = new RegExp(...);
    const match = url[0].path.match(regex);
    return match !== null && match[0].length === url[0].path.length;
  }

Answer 2

您可以使用the path和编程route为不同的组件创建包装器组件。

const routes: Routes = [
    { path: '', component: AComponent },
    ...
    { path: 'homes/:id/:rate/:item', component: WrapperComponent},
    ...
]

包装模板：

<detail-component *ngIf="yourCondition"><detail-component>
<home-component *ngIf="!yourCondition"></home-component>

你如何找到yourCondition我不知道的第一种方法。

但是，我肯定会反对这一点。

Answer 3

在上述情况下，取决于查询参数而不是路由参数，我发现@ritaj的答案很有用，只需几行代码即可检查以下路由。由于UrlMatcher似乎无法访问已激活的路由，因此也无法访问已激活的路由。

路线

{ path: 'apply', component: ApplicationRouterComponent },

路由处理程序组件

export class ApplicationRouterComponent implements OnInit {

  type: string;
  state: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams.subscribe(q => {
      this.type = q['type'];
      this.state = q['state'];
    });
  }

  showApplicationForm(): boolean {
    return this.type !== 'new' || this.state !== 'inprogress';
  }

  showInProgressForm(): boolean {
    return this.type === 'new' && this.state === 'inprogress';
  }

}

路由处理程序html

<app-application *ngIf="showApplicationForm()"></app-application>
<app-resume *ngIf="showInProgressForm()"></app-resume>

Angular 5应用程序中路由的相同路径和相同数量但不同的组件

3 个答案: