如何更新此 Ionic 应用程序以解决路由问题？

Question

我目前在使用 Ionic 应用程序开发课程时遇到问题，该课程假设使用 Ionic 4 或 5，而我正在使用版本 7。具体来说，我遇到了路由问题。

提供的代码成功显示主页http://localhost:8101/recipes。但是，当尝试访问 http://localhost:8101/recipes/r1 时，仅显示空白页面。

我怀疑版本差异可能是问题的原因。您能否帮助我确定必要的更新或修改，以使此 Ionic 应用程序与版本 7 无缝协作？

以下是相关代码片段：

这是recipe.model.ts文件：

export class Recipe {
    id: string = '';
    title: string = '';
    imageUrl: string = '';
    ingredients: string[] = [];
}

const recipe: Recipe = new Recipe();  

这是recipes.service.ts 文件：

import { Injectable } from '@angular/core';
import { Recipe } from './recipe.model';

@Injectable({
  providedIn: 'root'
})
export class RecipesService {

  private recipes: Recipe[] = [
    {
      id:'r1',
      title: 'Scnitzel',
      imageUrl:'https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Breitenlesau_Krug_Br%C3%A4u_Schnitzel.JPG/220px-Breitenlesau_Krug_Br%C3%A4u_Schnitzel.JPG',
      ingredients: ['French Fries','Pork Meat','Salad']
    },
    {
      id:'r2',
      title: 'Spaghetti',
      imageUrl:'https://upload.wikimedia.org/wikipedia/commons/2/2a/Spaghetti_al_Pomodoro.JPG',
      ingredients: ['Spaghetti','Meat','Tomatoes']
    }
  ];

  constructor() { }

  getAllRecipes(){
    return [...this.recipes];
  }

  getRecipe(recipeId: string){
    return{
      ...this.recipes.find(recipes=>{
        return recipes.id === recipeId;
      })!
      
    }
  }
}

这是recipe-detail.page.ts 文件：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { RecipesService } from '../recipes.service';
import { Recipe } from '../recipe.model';

@Component({
  selector: 'app-recipe-detail',
  templateUrl: './recipe-detail.page.html',
  styleUrls: ['./recipe-detail.page.scss'],
})
export class RecipeDetailPage implements OnInit {
  loadedRecipe: Recipe = new Recipe();

  constructor(
    private activatedRoute: ActivatedRoute, 
    private recipesService: RecipesService) 
    { }

  ngOnInit() {
    this.activatedRoute.paramMap.subscribe(paramMap =>{
      if (!paramMap.has('recipeId')) {
        //redirect
        return;
      }
      const recipeId = paramMap.get('recipeId')!;
            this.loadedRecipe = this.recipesService.getRecipe(recipeId)!;

    });
  }

}

这是recipe-detail.page.html 文件：

<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title>{{ loadedRecipe.title }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid no-padding>
    <ion-row>
      <ion-col no-padding>
        <ion-img [src]="loadedRecipe.imageUrl"></ion-img>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <h1>{{ loadedRecipe.title }}</h1>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-list>
          <ion-item *ngFor="let ig of loadedRecipe.ingredients">
            {{ ig }}
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

我尝试在 YouTube 上寻找答案，但运气也不佳。

Answer 1

感谢您的堆栈闪电战！

解释。

<>/食谱详细信息/id1

在上面的 URL 中，我们将

recipe-detail

与

app-routing.ts

上的路径定义进行匹配，这是可以的

但是如果你看下一节

id1

，这将是我们的菜谱ID，但如果我们看

recipe-detail-routing.module.ts

，我们只定义了一条路线，路径为

''

，所以它只会匹配

 <<basepath>>/recipe-detail

但是我们需要匹配

<<basepath>>/recipe-detail/:recipeId

，所以我将路径

:recipeId

添加到路线中，以便ID匹配并渲染详细信息！

所做的更改：

recipe.page.html - 我添加了

routerLink

来导航到详细信息页面！

<ion-list>
  <ion-item *ngFor="let recipe of recipes" [routerLink]="['recipe-detail', recipe.id]">
<ion-avatar>

recipe-detail-routing.module.ts - 我们正在使用

receiptId

路由参数，但它不存在于路径定义中，所以我添加了它！

const routes: Routes = [
  {
    path: ':recipeId', // <- changed here
    component: RecipeDetailPage
  }
];

stackblitz 演示