未捕获（承诺）：错误：无法匹配任何路由。 URL 段：'detail/version2/Tom%20Restaurant

Question

我想通过将标题作为参数将HalfScreenMapGrid 路由到ListingDetailTwo

![app-> 列表目录][2]

有没有其他选择

app.routing.ts

import { Routes } from '@angular/router';

import { AdminPanelLayoutComponent } from './layouts/adminPanel/AdminPanelLayout.component';
import { FrontendPanelLayoutComponent } from './layouts/frontendPanel/FrontendPanel.component';
import { AuthLayoutComponent } from './layouts/auth/auth-layout.component';

export const AppRoutes: Routes = [{
  path: '',
  redirectTo: 'home',
  pathMatch: 'full',
}, {
  path: '',
  component: FrontendPanelLayoutComponent,
  children: [{
    path: 'home',
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
  },
  {
    path: 'listing',
    loadChildren: () => import('./listing/listing.module').then(m => m.ListingModule)
  },
  {
    path: 'pages',
    loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)
  }]
}, 
{
  path: 'admin',
  component: AdminPanelLayoutComponent,
  children: [{
    path: '',
    loadChildren: () => import('./adminPages/admin.module').then(m => m.AdminModule)
  }]
},
{
  path: 'session',
  component: AuthLayoutComponent,
  children: [{
    path: '',
    loadChildren: () => import('./session/session.module').then(m => m.SessionModule)
  }]
}
];

listing.routing.ts

import { Routes } from '@angular/router';

import { ListWithSidebarComponent } from './ListWithSidebar/ListWithSidebar.component';
import { ListFullWidthComponent } from './ListFullWidth/ListFullWidth.component';
import { ListFullWidthMapComponent } from './ListFullWidthMap/ListFullWidthMap.component'; 

import { GridWithSidebarComponent } from './GridWithSidebar/GridWithSidebar.component';
import { GridFullWidthComponent } from './GridFullWidth/GridFullWidth.component';
import { GridFullWidthMapComponent } from './GridFullWidthMap/GridFullWidthMap.component';

import { HalfScreenMapListComponent } from './HalfScreenMapList/HalfScreenMapList.component';
import { HalfScreenMapGridComponent } from './HalfScreenMapGrid/HalfScreenMapGrid.component';

import { ListingDetailOneComponent } from './ListingDetailOne/ListingDetailOne.component';
import { ListingDetailTwoComponent } from './ListingDetailTwo/ListingDetailTwo.component';

export const ListingRoutes: Routes = [{
  path: 'list/with-sidebar',
  component: ListWithSidebarComponent
},
{
  path: 'list/full-width',
  component: ListFullWidthComponent
},
{
  path: 'list/full-width-map',
  component: ListFullWidthMapComponent
},
{
  path: 'grid/with-sidebar',
  component: GridWithSidebarComponent
},
{
  path: 'grid/full-width',
  component: GridFullWidthComponent
},
{
  path: 'grid/full-width-map',
  component: GridFullWidthMapComponent
},
{
  path: 'half-map/list',
  component: HalfScreenMapListComponent
},
{
  path: 'half-map/grid',
  component: HalfScreenMapGridComponent
},
{
  path: 'detail/version1',
  component: ListingDetailOneComponent
},
{
  path: 'detail/version2/:title',
  component: ListingDetailTwoComponent
}
];

HalfScreenMapGrid.component.ts

import { Component, OnInit, AfterViewInit, ViewEncapsulation, ViewChild, ElementRef, NgZone } 
from '@angular/core';
import {Router, ActivatedRoute} from '@angular/router';

@Component({
  selector: 'half-screen-map-grid',
  templateUrl: './HalfScreenMapGrid.component.html',
  styleUrls: ['./HalfScreenMapGrid.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class HalfScreenMapGridComponent implements OnInit{

   Data : any = [
                     {
                        badge    : 'Now Open',
                        category : 'Eat & Drink',
                        title    : 'Tom Restaurant',
                        address  : '964 School Street, New York',
                        image    : 'assets/images/most-img-1.jpg',
                        rating   : '5',
                        review   : '(12 reviews)'
                     },
                     {
                        badge    : 'Now Open',
                        category : 'Events',
                        title    : 'Sticky Band',
                        address  : 'Bishop Avenue, New York',
                        image    : 'assets/images/most-img-2.jpg',
                        rating   : '5',
                        review   : '(23 reviews)'
                     },
                     {
                        badge    : 'Now Open',
                        category : 'Hotels',
                        title    : 'Hotel Govendor',
                        address  : '778 Country Street, New York',
                        image    : 'assets/images/most-img-3.jpg',
                        rating   : '5',
                        review   : '(17 reviews)'
                     },
                     {
                        badge    : 'Now Open',
                        category : 'Eat & Drink',
                        title    : 'Burger House',
                        address  : '2726 Shinn Street, New York',
                        image    : 'assets/images/most-img-4.jpg',
                        rating   : '5',
                        review   : '(31 reviews)'
                     },
                     {
                        badge    : 'Now Open',
                        category : 'Airport',
                        title    : 'Burger House',
                        address  : '1512 Duncan Avenue, New York',
                        image    : 'assets/images/most-img-2.jpg',
                        rating   : '5',
                        review   : '(46 reviews)'
                     },
                     {
                        badge    : 'Now Closed',
                        category : 'Eat & Drink',
                        title    : 'Think Coffee',
                        address  : '215 Terry Lane, New York',
                        image    : 'assets/images/most-img-6.jpg',
                        rating   : '5',
                        review   : '(15 reviews)'
                     }

                  ];

   constructor(
    ) { }
                 

   
  ngOnInit() {
  }
 onSelect(list){
  this.router.navigate(['detail/version2', list.title])
}


}

ListingDeatilTwo.component.ts

        import { Component, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
    import {ActivatedRoute} from '@angular/router';
    @Component({
      selector: 'list-detail-two',
      templateUrl: './ListingDetailTwo.component.html',
      styleUrls: ['./ListingDetailTwo.component.scss'],
      encapsulation: ViewEncapsulation.None
    })
    export class ListingDetailTwoComponent implements OnInit{
       public t;
       lat = -34.397;
       lng = 150.644;
       smallGalleryTitle : string = 'Gallery';
       smallGalleryData : any = [
                                  {
                                     image : 'assets/images/dp-1.jpg',
                                  },
                                  {
                                     image : 'assets/images/dp-4.jpg',
                                  },
                                  {
                                     image : 'assets/images/dp-3.jpg',
                                  },
                                  {
                                     image : 'assets/images/dp-5.jpg',
                                  }
                               ];
                               
       constructor(private route: ActivatedRoute){}
       ngOnInit(): void{
          let title =  this.route.snapshot.paramMap.get('title');
          this.t = title;
       }
    
       }

List 是引用 Data 数组的循环。我无法通过将标题作为参数从HalfScreenMapGrid 中的数据数组到ListingDetailTwo 进行路由

Answer 1

在下面的方法中：

 onSelect(list){
  this.router.navigate(['detail/version2', list.title])
}

请求导航到detail/version2 url，没有看到任何匹配的路由路径。