Блог

Главная - Вопросы по программированию - ОШИБКА Ошибка: Не пойман (в обещании): Ошибка: Не удается сопоставить какие-либо маршруты. Есть идеи, как я мог бы решить эту проблему?

ОШИБКА Ошибка: Не пойман (в обещании): Ошибка: Не удается сопоставить какие-либо маршруты. Есть идеи, как я мог бы решить эту проблему?

#angular #angular-routing

Вопрос:

Я создаю приложение для угловых рецептов. Я хочу иметь возможность нажать на кнопку «Полный рецепт» на странице «Сохраненный рецепт» и просмотреть полную информацию о рецепте. он отлично работает в компоненте элемента рецепта, но когда я нажимаю на ту же кнопку на странице сохраненного рецепта, я получаю эту ошибку в своей консоли, и ничего не происходит.

Ошибка

 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'saved-recipes/recipe/637876'
Error: Cannot match any routes. URL Segment: 'saved-recipes/recipe/637876'
    at ApplyRedirects.noMatchError (router.js:2623)
    at CatchSubscriber.selector (router.js:2605)
    at CatchSubscriber.error (catchError.js:27)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at ThrowIfEmptySubscriber._error (Subscriber.js:75)
    at ThrowIfEmptySubscriber.error (Subscriber.js:55)
    at TakeLastSubscriber._error (Subscriber.js:75)
    at resolvePromise (zone-evergreen.js:1213)
    at resolvePromise (zone-evergreen.js:1167)
    at zone-evergreen.js:1279
    at ZoneDelegate.invokeTask (zone-evergreen.js:406)
    at Object.onInvokeTask (core.js:28561)
    at ZoneDelegate.invokeTask (zone-evergreen.js:405)
    at Zone.runTask (zone-evergreen.js:178)
    at drainMicroTaskQueue (zone-evergreen.js:582)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:491)
    at invokeTask (zone-evergreen.js:1600)
defaultErrorLogger @ core.js:6210
handleError @ core.js:6258
next @ core.js:29181
schedulerFn @ core.js:25912
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:25902
(anonymous) @ core.js:28600
invoke @ zone-evergreen.js:372
run @ zone-evergreen.js:134
runOutsideAngular @ core.js:28503
onHandleError @ core.js:28600
handleError @ zone-evergreen.js:376
runGuarded @ zone-evergreen.js:147
api.microtaskDrainDone @ zone-evergreen.js:1074
drainMicroTaskQueue @ zone-evergreen.js:589
invokeTask @ zone-evergreen.js:491
invokeTask @ zone-evergreen.js:1600
globalZoneAwareCallback @ zone-evergreen.js:1626

Маршрутизация приложений

 import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { RecipeDetailsComponent } from './recipe-details/recipe-details.component';
import { SavedRecipesComponent } from './saved-recipes/saved-recipes.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'recipe/:id', component: RecipeDetailsComponent },
  { path: 'saved-recipes', component: SavedRecipesComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Кнопка элемента рецепта

   <button class="btn btn-primary me-3" [routerLink]="['recipe', recipe.id]" style="text-decoration: none;">Show Full
    Recipe</button>

Ответ №1:

Вы должны попытаться начать с корня при переходе к деталям рецепта:

 [routerLink]="['/recipe', recipe.id]"
Метки: ,