錯誤錯誤：未捕獲（承諾）：錯誤：無法匹配任何路由。我有什么想法可以解決這個問題嗎？-有解無憂

我正在創建一個有角度的食譜應用程式。我希望能夠點擊我保存的食譜頁面中的完整食譜按鈕并查看我的完整食譜資訊。它在配方專案組件中作業正常，但是當我在保存的配方頁面中單擊相同的按鈕時，我的控制臺中出現此錯誤并且沒有任何反應。

錯誤

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  [routerLink]="['recipe', recipe.id]" style="text-decoration: none;">Show Full
    Recipe</button>

uj5u.com熱心網友回復：

導航到配方詳細資訊時，您應該嘗試從根開始：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/320955.html

標籤：有角的角度路由

上一篇：角度排氣圖

下一篇：Angular-ReactiveForms-在物件內部系結物件