ERROR Error: Uncaught (in promise): Error: Cannot match any routes. Any ideas how i could solve this issue?

Question

我正在创建一个 angular 食谱应用程序。我希望能够在我保存的食谱页面中单击“完整食谱”按钮并查看我的完整食谱信息。它在食谱项目组件中工作正常，但是当我在保存的食谱页面中单击同一个按钮时，我在我的控制台中收到此错误并且没有任何反应。

错误

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>

Answer 1

导航到食谱详细信息时，您应该尝试从根目录开始：

[routerLink]="['/recipe', recipe.id]"

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. Any ideas how i could solve this issue?

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. Any ideas how i could solve this issue?

angular-routing

angular