Нужно исправить эту ошибку, я не знаю, что делать, мой синтаксис не является неправильным, но если я запускаю, он отображает ошибку
мой модуль маршрутизации приложений
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: 'recipes',
children: [
{
path: '',
loadChildren:
'./recipes/recipes.module#RecipesPageModule'
},
{
path: ':recipeId',
loadChildren:
'./recipes/recipe-detail/recipe-detail.module#RecipeDetailPageModule'
}
]},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
мой рецепт-service.ts
import { Injectable } from '@angular/core';
import { Recipe } from './recipe.model';
@Injectable({
providedIn: 'root'
})
export class RecipesService {
private recipes: Recipe[] = [
{
id: 'r1',
title: 'Smoked Fish',
// tslint:disable-next-line: max-line-length
imageUrl: '../assets/img/sugba.jpg',
ingredients: ['Fish', 'Salt', 'Lemon Grass']
},
{
id: 'r2',
title: 'Raw Fish',
// tslint:disable-next-line: max-line-length
imageUrl: '../assets/img/rawfish.jpg',
ingredients: ['Fish', 'Salt', 'Onion']
},
];
constructor() { }
getAllRecipes(){
return [...this.recipes];
}
getRecipe(recipeId: string){
return {...this.recipes.find(recipe => {
return recipe.id === recipeId;
})};
}
}
мои рецепты.page.html
<ion-header>
<ion-toolbar>
<ion-title color = "primary">recipes</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor = "let recipe of recipes" [routerLink] = "['/', recipe.id]">
<ion-avatar>
<ion-img [src] = "recipe.imageUrl">
</ion-img>
</ion-avatar>
<ion-label>
{{recipe.title}}
</ion-label>
</ion-item>
</ion-list>
</ion-content>
ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: Не удается сопоставить ни один маршрут. Сегмент URL: 'r2' Ошибка: Не удается сопоставить ни одного маршрута. Сегмент URL: 'r2'
<ion-item *ngFor = "let recipe of recipes" [routerLink] = "['/', recipe.id]">
[routerLink] = "['/', recipe.id]"
означает, что вы перенаправляетесь на корневой маршрут. Но ваш ожидаемый маршрут является дочерним элементом маршрута.
Используйте это вместо этого:
[routerLink] = "recipe.id"
Я думаю, вам нужно:
[routerLink] = "['recipes/', recipe.id]"
которые действительно соответствуют маршруту