轮播图跳转

smarteat-app/src/app/image-popup/image-popup.component.html

@@ -1,15 +1,13 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-button (click)="close()" >
-        <ion-icon name="arrow-back"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-    <ion-title>内容详情</ion-title>
-  </ion-toolbar>
-</ion-header>
-
 <ion-content>
-  <img [src]="imageUrl" style="width: 100%; height: auto;" />
-  <div [innerHTML]="description"></div> <!-- 这里插入 HTML 格式的描述 -->
-</ion-content>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>图片详情</ion-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="close()">关闭</ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- 动态加载传递的组件 -->
+  <ng-container *ngComponentOutlet="component"></ng-container>
+</ion-content>

smarteat-app/src/app/image-popup/image-popup.component.ts

@@ -1,23 +1,24 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Type } from '@angular/core';
+import { ModalController } from '@ionic/angular';
 import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/angular/standalone';
-import { ModalController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-image-popup',
   templateUrl: './image-popup.component.html',
   styleUrls: ['./image-popup.component.scss'],
-  standalone:true,
-  imports:[
-    IonContent,IonHeader,IonButton,IonButtons,IonToolbar,IonTitle,IonIcon
+  standalone: true,
+  imports: [
+    IonContent, IonHeader, IonButton, IonButtons, IonToolbar, IonTitle, IonIcon
   ]
 })
 export class ImagePopupComponent {
-  @Input() imageUrl: string = ''; // 添加默认值
-  @Input() description: string = ''; // 添加默认值
+  @Input() imageUrl: string = '';  // 图片URL
+  @Input() description: string = '';  // 图片描述
+  @Input() component: Type<any> | null = null;  // 动态加载的组件
 
   constructor(private modalController: ModalController) {}
 
   close() {
     this.modalController.dismiss();
   }
-}
+}

smarteat-app/src/app/image-popup/image1-popup/image1-popup.component.html

@@ -0,0 +1,13 @@
+<ion-content>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>1图片详情</ion-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="close()">关闭</ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- 动态加载传递的组件 -->
+  <ng-container *ngComponentOutlet="component"></ng-container>
+</ion-content>

smarteat-app/src/app/image-popup/image1-popup/image1-popup.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { Image1PopupComponent } from './image1-popup.component';
+
+describe('Image1PopupComponent', () => {
+  let component: Image1PopupComponent;
+  let fixture: ComponentFixture<Image1PopupComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [Image1PopupComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Image1PopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

smarteat-app/src/app/image-popup/image1-popup/image1-popup.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-image1-popup',
+  templateUrl: './image1-popup.component.html',
+  styleUrls: ['./image1-popup.component.scss'],
+  standalone: true,
+  imports: [IonContent, IonHeader, IonButton, IonButtons, IonToolbar, IonTitle, IonIcon]
+})
+export class Image1PopupComponent {
+  @Input() imageUrl: string = '';
+  @Input() description: string = '';
+
+  constructor(private modalController: ModalController) {}
+  ngOnInit() {console.log(this.description)}
+  
+
+  close() {
+    this.modalController.dismiss();
+  }
+}

smarteat-app/src/app/image-popup/image2-popup/image2-popup.component.html

@@ -0,0 +1,14 @@
+<ion-content>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>2图片详情</ion-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="close()">关闭</ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- 显示图片和描述 -->
+  <img [src]="imageUrl" alt="图片" style="width: 100%; height: auto;">
+  <div [innerHTML]="description"></div>
+</ion-content>

smarteat-app/src/app/image-popup/image2-popup/image2-popup.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { Image2PopupComponent } from './image2-popup.component';
+
+describe('Image2PopupComponent', () => {
+  let component: Image2PopupComponent;
+  let fixture: ComponentFixture<Image2PopupComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [Image2PopupComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Image2PopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

smarteat-app/src/app/image-popup/image2-popup/image2-popup.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-image2-popup',
+  templateUrl: './image2-popup.component.html',
+  styleUrls: ['./image2-popup.component.scss'],
+  standalone: true,
+  imports: [IonContent, IonHeader, IonButton, IonButtons, IonToolbar, IonTitle, IonIcon]
+})
+export class Image2PopupComponent {
+  @Input() imageUrl: string = '';
+  @Input() description: string = '';
+
+  constructor(private modalController: ModalController) {}
+
+  ngOnInit() {}
+
+  close() {
+    this.modalController.dismiss();
+  }
+}

smarteat-app/src/app/image-popup/image3-popup/image3-popup.component.html

@@ -0,0 +1,14 @@
+<ion-content>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>3图片详情</ion-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="close()">关闭</ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- 显示图片和描述 -->
+  <img [src]="imageUrl" alt="图片" style="width: 100%; height: auto;">
+  <div [innerHTML]="description"></div>
+</ion-content>

smarteat-app/src/app/image-popup/image3-popup/image3-popup.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { Image3PopupComponent } from './image3-popup.component';
+
+describe('Image3PopupComponent', () => {
+  let component: Image3PopupComponent;
+  let fixture: ComponentFixture<Image3PopupComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [Image3PopupComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Image3PopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

smarteat-app/src/app/image-popup/image3-popup/image3-popup.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-image3-popup',
+  templateUrl: './image3-popup.component.html',
+  styleUrls: ['./image3-popup.component.scss'],
+  standalone: true,
+  imports: [IonContent, IonHeader, IonButton, IonButtons, IonToolbar, IonTitle, IonIcon]
+})
+export class Image3PopupComponent {
+  @Input() imageUrl: string = '';
+  @Input() description: string = '';
+
+  constructor(private modalController: ModalController) {}
+
+  ngOnInit() {}
+
+  close() {
+    this.modalController.dismiss();
+  }
+}

smarteat-app/src/app/image-popup/image4-popup/image4-popup.component.html

@@ -0,0 +1,14 @@
+<ion-content>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>4图片详情</ion-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="close()">关闭</ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- 显示图片和描述 -->
+  <img [src]="imageUrl" alt="图片" style="width: 100%; height: auto;">
+  <div [innerHTML]="description"></div>
+</ion-content>

smarteat-app/src/app/image-popup/image4-popup/image4-popup.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { Image4PopupComponent } from './image4-popup.component';
+
+describe('Image4PopupComponent', () => {
+  let component: Image4PopupComponent;
+  let fixture: ComponentFixture<Image4PopupComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [Image4PopupComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Image4PopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

smarteat-app/src/app/image-popup/image4-popup/image4-popup.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-image4-popup',
+  templateUrl: './image4-popup.component.html',
+  styleUrls: ['./image4-popup.component.scss'],
+  standalone: true,
+  imports: [IonContent, IonHeader, IonButton, IonButtons, IonToolbar, IonTitle, IonIcon]
+})
+export class Image4PopupComponent {
+    // 使用 @Input() 来接收来自父组件传递的数据
+    @Input() imageUrl: string = '';
+    @Input() description: string = '';
+  
+    constructor(private modalController: ModalController) {}
+  ngOnInit() {}
+
+  close() {
+    this.modalController.dismiss();
+  }
+}

smarteat-app/src/app/tab1/tab1.page.html

@@ -7,7 +7,7 @@
 <div class="carousel-container" style="border-radius: 25px; margin: 5px auto;">
   <div class="carousel" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
     <div class="slide" *ngFor="let image of images; let i = index"> <!-- 添加 let i = index -->
-      <img [src]="image" (click)="onImageClick(i)" style="width: 100%; height: auto;" /> <!-- 使用 i -->
+      <img [src]="image" (click)="openImagePopup(image, descriptions[i])" style="width: 100%; height: auto;" />
     </div>
   </div>
 

smarteat-app/src/app/tab1/tab1.page.ts

@@ -1,13 +1,18 @@
-import { Component, OnInit,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { CloudSeUser } from 'src/lib/cloudSeuser'; // 引入 CloudSeUser 类
 import { FmodeChatCompletion } from 'fmode-ng'; // 引入 FmodeChatCompletion
 import { addIcons } from 'ionicons';
 import { albumsOutline, documentOutline, leafOutline, scanOutline, storefrontOutline } from 'ionicons/icons';
-import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCol, IonContent, IonHeader, IonIcon, IonInput, IonRow, IonTextarea, IonTitle, IonToolbar, IonGrid, IonCardTitle, IonSearchbar,} from '@ionic/angular/standalone'; // 导入 Ionic 组件
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCol, IonContent, IonHeader, IonIcon, IonInput, IonRow, IonTextarea, IonTitle, IonToolbar, IonGrid, IonCardTitle, IonSearchbar } from '@ionic/angular/standalone'; // 导入 Ionic 组件
 import { CommonModule } from '@angular/common'; // 导入 CommonModule
 import { ImagePopupComponent } from '../image-popup/image-popup.component'; // 导入弹窗组件
-import { ModalController,NavController} from '@ionic/angular/standalone';
+import { ModalController, NavController } from '@ionic/angular/standalone';
+import { Image1PopupComponent } from '../image-popup/image1-popup/image1-popup.component';
+import { Image2PopupComponent } from '../image-popup/image2-popup/image2-popup.component';
+import { Image3PopupComponent } from '../image-popup/image3-popup/image3-popup.component';
+import { Image4PopupComponent } from '../image-popup/image4-popup/image4-popup.component';
+
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
@@ -16,7 +21,7 @@ import { ModalController,NavController} from '@ionic/angular/standalone';
   imports: [
     CommonModule, IonContent, IonHeader, IonTitle, IonToolbar, 
     IonButton, IonTextarea, IonInput, IonCard, IonCardContent, IonGrid, IonRow, IonCol, IonIcon,
-    IonCardHeader,IonCardTitle,IonSearchbar,
+    IonCardHeader, IonCardTitle, IonSearchbar,
   ],
 })
 export class Tab1Page implements OnInit {
@@ -29,11 +34,18 @@ export class Tab1Page implements OnInit {
   // 存储图片的数组
   images = [
     'https://app.fmode.cn/dev/jxnu/202226701038/ssbt2022.jpg',
-    'https://app.fmode.cn/dev/jxnu/202226701038/ssbt2022.jpg',
-    'https://app.fmode.cn/dev/jxnu/202226701038/ssbt2022.jpg',
-    'https://app.fmode.cn/dev/jxnu/202226701038/ssbt2022.jpg'
+    'https://app.fmode.cn/dev/jxnu/202226701038/ssbt2021.jpg',
+    '',
+    ''
   ];
 
+// 每张图片的描述
+  descriptions = [
+    '<p><strong>第一张图片</strong></p>',
+      '<p><strong>第二张图片</strong></p>',
+      '<p><strong>第三张图片</strong></p>',
+      '<p><strong>第四张图片</strong></p>'
+  ];
   // 当前显示的幻灯片索引
   currentSlide: number = 0;
 
@@ -70,7 +82,7 @@ export class Tab1Page implements OnInit {
     } catch (error) {
         console.error('加载用户数据失败', error);
     }
-}
+  }
 
   // 获取健康建议
   async goHealthTips() {
@@ -122,34 +134,62 @@ export class Tab1Page implements OnInit {
     });
   }
 
-   // 打开弹窗
-async openImagePopup(imageUrl: string, description: string) {
-  try {
-    const modal = await this.modalCtrl.create({
-      component: ImagePopupComponent,
-      componentProps: { imageUrl, description }
-    });
-    await modal.present();
-  } catch (error) {
-    console.error('打开弹窗时出错', error);  // 捕获并输出错误
-  }
-}
+  // 打开弹窗
+  async openImagePopup(imageUrl: string, description: string) {
+    let modal;
+
+    // 根据图片的 URL 或其他参数动态加载弹窗组件
+    if (imageUrl === this.images[0]) {
+      modal = await this.modalCtrl.create({
+        component: Image1PopupComponent,
+        componentProps: {
+          imageUrl: imageUrl,
+          description: description
+        }
+      });
+    } else if (imageUrl === this.images[1]) {
+      modal = await this.modalCtrl.create({
+        component: Image2PopupComponent,
+        componentProps: {
+          imageUrl: imageUrl,
+          description: description
+        }
+      });
+    } else if (imageUrl === this.images[2]) {
+      modal = await this.modalCtrl.create({
+        component: Image3PopupComponent,
+        componentProps: {
+          imageUrl: imageUrl,
+          description: description
+        }
+      });
+    } else if (imageUrl === this.images[3]) {
+      modal = await this.modalCtrl.create({
+        component: Image4PopupComponent,
+        componentProps: {
+          imageUrl: imageUrl,
+          description: description
+        }
+      });
+    }
 
+    if (modal) {
+      await modal.present();
+    }
+  }
 
   // 点击轮播图
-async onImageClick(index: number) {
-const descriptions = [
-  '<p><strong>第一张图片</strong>的描述内容。<br>这里有更多的文字，还可以使用 <em>斜体</em> 和 <u>下划线</u>。</p>',
-  '<p><strong>第二张图片</strong>的描述内容。<br>此描述支持更复杂的布局和<strong>加粗文本</strong>。</p>',
-  '<p><strong>第三张图片</strong>的描述内容。<br>您可以在这里插入更多的 <a href="#">链接</a> 或者其他 HTML 元素。</p>',
-  '<p><strong>第四张图片</strong>的描述内容。<br>支持多行内容和 <em>各种格式</em>。</p>'
-];
-
-
-  // 打开弹窗并传递描述
-  await this.openImagePopup(this.images[index], descriptions[index]);
-}
-
+  async onImageClick(index: number) {
+    const descriptions = [
+      '<p><strong>第一张图片</strong></p>',
+      '<p><strong>第二张图片</strong></p>',
+      '<p><strong>第三张图片</strong></p>',
+      '<p><strong>第四张图片</strong></p>'
+    ];
+
+    // 打开弹窗并传递描述
+    await this.openImagePopup(this.images[index], descriptions[index]);
+  }
 
   // 前一个幻灯片
   prevSlide() {
@@ -174,8 +214,9 @@ const descriptions = [
     this.currentSlide = index;
   }
 
-  // 跳转到饮食建议页面
-  goHealthTipsPage() {
-    this.router.navigate([`/tabs/tips`]);
+    // 跳转到饮食建议页面
+    goHealthTipsPage() {
+      this.router.navigate([`/tabs/tips`]);
+    }
   }
-}
+