网址段不能匹配任何路由

Question

我正在尝试创建一个面包屑，该面包屑也应管理详细页面。 在这种情况下，当有一个详细页面时，我只想在面包屑上显示一个简单的文本，而没有页面ID。 像这样.. myPage / page / detail和没有myPage / detail / id

我创建了一个与网址正确匹配的方法。 问题是，当我尝试单击“详细信息”（无ID）时，出现错误无法匹配任何路线。 URL段“ myPage / page / detail / id”。

@Component({
  selector: 'app-breadcrumbs',
  template: `
 <li class="breadcrumb-item active float-left">
    <a href="javascript:history.back()"><i class="fa fa-arrow-left"></i> Back</a>
  </li>
  <ng-template ngFor let-breadcrumb [ngForOf]="breadcrumbs" let-last="last">
     <li class="breadcrumb-item float-left" [ngClass]="{ active: last }">
      <i *ngIf="breadcrumb.icon" class="{{ breadcrumb.icon }} fa-sm"></i>
      <a *ngIf="breadcrumb.hasPage && !breadcrumb.detail" [routerLink]="breadcrumb.url" class="pl-1"
      >{{ breadcrumb.label | translate }} {{ breadcrumb.parameter }}</a
    >
    <a *ngIf="breadcrumb.hasPage && breadcrumb.detail" 
      [routerLink]="breadcrumb.url/breadcrumb.params" class="pl-1"
      >{{ breadcrumb.label | translate }} {{ breadcrumb.parameter }}</a
    >
      <span *ngIf="!breadcrumb.hasPage"> {{ breadcrumb.label | translate }} {{ breadcrumb.parameter 
    }} 
      </span>
     </li>
   </ng-template>
  `
 })
export class BreadcrumbsComponent {
 public navItems = navItems;
 public breadcrumbs = [];

    constructor(public router: Router, public route: ActivatedRoute, public translateService: 
    TranslateService) {
    this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(event => {
  this.breadcrumbs = [];
  let currentRoute = this.route.root,
  url = '';
  do {
    const childrenRoutes = currentRoute.children;
    currentRoute = null;
    childrenRoutes.forEach(route => {
      if (route.outlet === 'primary') {
        const routeSnapshot = route.snapshot;
        if (routeSnapshot.url[0]) {
          this.buildBreadCrump(
            (<any>routeSnapshot)._routerState.url,
            routeSnapshot.url,
            routeSnapshot.params,
            navItems,
            this.breadcrumbs,
            '/' + routeSnapshot.url[0]
          );
        }
        currentRoute = route;
      }
    });
  } while (currentRoute);
 });
}

private buildBreadCrump(url, uriSegments, params, tree, breadcrumbs, completeUrl) {

   if (!uriSegments[0]) {
     return;
  }
  // tree è la parte di navitens in cui sto navigando cerco una corrispondenza con uriSegments
  const item = tree.find(
  item =>
    (item.keyPage && uriSegments[0].path === item.keyPage) ||
    (item.name && uriSegments[0].path === item.name)
  );

  if (item) {
    let segment = '';
    for (let j = 0; j < uriSegments.length; j++) {
    // console.log(' uriSegments ',  uriSegments);
      segment += '/' + uriSegments[j].path;
    }
    segment = url.split(segment)[0] + segment;

  // console.log('***************** confronto');
  // console.log(segment);
  // console.log('current breadcrumbs ---> ', this.breadcrumbs);

  if (!this.breadcrumbs.find(b => b.url == segment)) {
    // console.log('non trova ' + segment + ' quindi lo aggiunge ');
    // console.log(item);
    let label = params.name ? params.name : item.name;
    //console.log(item.hasValue+"--");
    let parameter = null;
    if (item.hasValue && uriSegments[1]) {
      if (!item.hideValue) {
        parameter = uriSegments[1].path;
      }
      completeUrl = completeUrl + '/' + uriSegments[1].path;
    }
    // console.log('-------');
    // console.log(uriSegments);
    // console.log(completeUrl);


    console.log('uri segments path --> ', uriSegments);
    if(item.detail && params.id){
      console.log('params id --> ', params.id);
      this.breadcrumbs.push({
        label: label,
        url: completeUrl,
        hasPage: item.hasPage,
        icon: item.icon,
        visible: item.visible,
        parameter: parameter,
        params: params.id,
        detail: item.detail
      });
    }else{
      this.breadcrumbs.push({
        label: label,
        url: completeUrl,
        hasPage: item.hasPage,
        icon: item.icon,
        visible: item.visible,
        parameter: parameter
      });
    }


  } else {
    console.log('trova ' + segment);
  }
}

if (item && item.children && uriSegments[1]) {
  if (item.hasValue) {
    if (uriSegments[2]) {
      this.buildBreadCrump(
        url,
        uriSegments.slice(2),
        params,
        item.children,
        breadcrumbs,
        completeUrl + '/' + uriSegments[2].path
      );
    }
  } else {
    this.buildBreadCrump(
      url,
      uriSegments.slice(1),
      params,
      item.children,
      breadcrumbs,
      completeUrl + '/' + uriSegments[1].path
     );
   }
  }
}

public backHistory() {
  window.history.back();
}

}

这些是_nav.ts件

{
   name: 'myPage',
   icon: 'icon-user-following',
   url: '/myPage',
   keyPage: 'myPage',
   visible: true,
   hasSidebar: true,
   children: [
     {
       name: 'page',
       url: '/myPage/page',
       keyPage: 'page',
       hasPage: true,
       visible: true,
       children: [
       {
           name: 'detail',
           url: '/myPage/page/detail/*',
            keyPage: 'detail',
            hasPage: true,
            visible: false,
            hasValue: false,
            hideValue: true,
            detail: true
        }
      ]
    },
  ]

}

这是appRouting

  {
        path: 'myPage/page/detail',
        loadChildren: 
         './views/myPage/components/pagedetail/pageDetail.module#DetailModule'
  },
  {
    path: 'myPage/page/detail/:id',
    loadChildren: './views/myPage/components/pagedetail/pageDetail.module#DetailModule'
  },