ERROR ERROR: Uncaught (in promise): ERROR: Cannot match any

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]"