跳转

myapp/src/app/tab1/page-type/page-type.page.html

@@ -1,13 +1,21 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>page-type</ion-title>
+    <ion-title>{{ categoryName }}</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">page-type</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>
+  <ion-list>
+    <ion-item 
+      *ngFor="let recipe of recipes" 
+      [routerLink]="['/page-detail', recipe.id]"
+      detail="true">
+      <ion-thumbnail slot="start">
+        <img [src]="recipe.imageUrl" [alt]="recipe.title">
+      </ion-thumbnail>
+      <ion-label>
+        <h2>{{ recipe.title }}</h2>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content>

myapp/src/app/tab1/page-type/page-type.page.scss

@@ -0,0 +1,22 @@
+ion-thumbnail {
+    --size: 64px;
+    --border-radius: 8px;
+    overflow: hidden;
+    
+    img {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  
+  ion-item {
+    --padding-start: 16px;
+    --padding-end: 16px;
+    --inner-padding-end: 0;
+    
+    h2 {
+      font-weight: 500;
+      margin-bottom: 4px;
+    }
+  }

myapp/src/app/tab1/tab1.module.ts

@@ -1,20 +1,52 @@
-import { IonicModule } from '@ionic/angular';
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { Tab1Page } from './tab1.page';
-import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+import { Component, OnInit } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonThumbnail, IonLabel } from '@ionic/angular/standalone';
 
-import { Tab1PageRoutingModule } from './tab1-routing.module';
+interface Recipe {
+  id: number;
+  title: string;
+  imageUrl: string;
+}
 
-@NgModule({
-  imports: [
-    IonicModule,
-    CommonModule,
-    FormsModule,
-    ExploreContainerComponentModule,
-    Tab1PageRoutingModule
-  ],
-  declarations: [Tab1Page]
+@Component({
+  selector: 'app-page-type',
+  templateUrl: './page-type.page.html',
+  styleUrls: ['./page-type.page.scss'],
+  standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonThumbnail, IonLabel]
 })
-export class Tab1PageModule {}
+export class PageTypePage implements OnInit {
+  categoryName: string = '意大利菜';
+  
+  recipes: Recipe[] = [
+    {
+      id: 1,
+      title: '经典意大利肉酱面',
+      imageUrl: 'https://images.unsplash.com/photo-1555949258-eb67b1ef0ceb'
+    },
+    {
+      id: 2,
+      title: '奶油蘑菇意大利面',
+      imageUrl: 'https://images.unsplash.com/photo-1611270629569'
+    },
+    {
+      id: 3,
+      title: '海鲜意大利面',
+      imageUrl: 'https://images.unsplash.com/photo-1516100882582-96c3a05fe590'
+    },
+    {
+      id: 4,
+      title: '番茄罗勒意面',
+      imageUrl: 'https://images.unsplash.com/photo-1608755728476'
+    },
+    {
+      id: 5,
+      title: '千层面',
+      imageUrl: 'https://images.unsplash.com/photo-1611273426858'
+    }
+  ];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}