跳转收藏 记录

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

@@ -12,7 +12,7 @@
     <ion-item 
       *ngFor="let recipe of recipes" 
       [routerLink]="['/recipe-detail', recipe.id]"
-      detail="true">
+      detail="true" (click) = "goToDetail()">
       <ion-thumbnail slot="start">
         <img [src]="recipe.imageUrl" [alt]="recipe.title">
       </ion-thumbnail>

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

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { NavController } from '@ionic/angular';
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonItem, IonLabel, IonList, IonThumbnail, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 interface Recipe {
@@ -22,7 +23,7 @@ export class PageTypePage implements OnInit {
   categoryName: string = '分类名称';
   recipes: Recipe[] = [];
 
-  constructor(private route: ActivatedRoute) {}
+  constructor(private route: ActivatedRoute,private navCtrl: NavController) {}
 
   ngOnInit() {
     // 从路由参数获取分类名称
@@ -77,4 +78,9 @@ export class PageTypePage implements OnInit {
       }
     ];
   }
+
+  goToDetail() {
+    this.navCtrl.navigateForward(["tabs","tab1","page-detail"]);
+    console.log('Navigating to page-detail');
+  }
 }

myapp/src/app/tab3/tab3.page.html

@@ -29,14 +29,14 @@
 
   <!-- 数据卡片，使用普通 div 代替 ion-grid 和 ion-col -->
   <div class="stats-grid">
-    <div class="stat-card history" style="display: inline-block; width: 48%;">
+    <div class="stat-card history" style="display: inline-block; width: 48%;" (click)="goToRecords()">
       <ion-icon name="time" class="stat-icon"></ion-icon>
-      <div class="stat-content">
+      <div class="stat-content" >
         <h3>156</h3>
         <p>历史浏览</p>
       </div>
     </div>
-    <div class="stat-card favorite" style="display: inline-block; width: 48%;">
+    <div class="stat-card favorite" style="display: inline-block; width: 48%;" (click)="goToCollections()">
       <ion-icon name="heart" class="stat-icon"></ion-icon>
       <div class="stat-content">
         <h3>89</h3>

myapp/src/app/tab3/tab3.page.ts

@@ -1,5 +1,6 @@
 // tab3.page.ts
 import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular';
 
 @Component({
   selector: 'app-tab3',
@@ -9,7 +10,7 @@ import { Component } from '@angular/core';
 })
 export class Tab3Page {
 
-  constructor() { }
+  constructor(private navCtrl: NavController) { }
 
   handleAction(type: string) {
     switch(type) {
@@ -24,4 +25,13 @@ export class Tab3Page {
         break;
     }
   }
+  goToRecords() {
+    this.navCtrl.navigateForward(["tabs","tab3","page-records"]);
+    console.log('Navigating to page-records');
+  }
+  goToCollections() {
+    this.navCtrl.navigateForward(["tabs","tab3","page-collections"]);
+    console.log('Navigating to page-collections');
+  }
+
 }