提交代码7

src/app/tab1/tab1.module.ts

@@ -2,7 +2,7 @@ import { IonicModule } from '@ionic/angular';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { SwiperModule } from 'swiper/angular';  // 导入 SwiperModule
+import { CompSwiperComponent } from 'src/lib/comp-swiper/comp-swiper.component'; // 导入 CompSwiperModule
 import { Tab1Page } from './tab1.page';
 import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
 import { Tab1PageRoutingModule } from './tab1-routing.module';
@@ -12,9 +12,9 @@ import { Tab1PageRoutingModule } from './tab1-routing.module';
     IonicModule,
     CommonModule,
     FormsModule,
-    SwiperModule,
     ExploreContainerComponentModule,
-    Tab1PageRoutingModule
+    CompSwiperComponent,
+    Tab1PageRoutingModule,
   ],
   declarations: [Tab1Page]
 })

src/app/tab1/tab1.page.html

@@ -23,20 +23,8 @@
       </div>
     </div>
   </div>
-  <div class="transparent-box">
-    <!-- 添加轮播图 -->
-    <div class="swiper-container">
-      <!-- 轮播图的每一张幻灯片 -->
-      <div class="swiper-wrapper">
-        <div class="swiper-slide" *ngFor="let slide of slides">
-          <img [src]="slide.image" alt="{{ slide.title }}">
-          <p>{{ slide.title }}</p>
-        </div>
-      </div>
-      <!-- 分页器 -->
-      <div class="swiper-pagination"></div>
-    </div>
-  </div>
+  <!-- 添加轮播图 -->
+  <app-comp-swiper [list]="imageList" [options]="{ direction: 'vertical'}" style="height:200px"></app-comp-swiper>
   <!-- 分隔线 -->
   <hr class="divider" />
   <div class="background-box">

src/app/tab1/tab1.page.ts

@@ -1,6 +1,5 @@
 import { Component , AfterViewInit } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import Swiper from 'swiper';
 import { Network, DataSet, Node, Edge } from 'vis-network/standalone';
 // 扩展 Node 和 Edge 类型以支持自定义属性
 interface CustomNode extends Node {
@@ -13,39 +12,27 @@ interface CustomNode extends Node {
 })
 
 export class Tab1Page implements AfterViewInit{
-  // 定义 slides 属性，数组中的每个对象代表一个轮播图项目
-  slides = [
-    { image: '/assets/images/slide1.jpg', title: 'Slide 1' },
-    { image: '/assets/images/slide2.jpg', title: 'Slide 2' },
-    { image: '/assets/images/slide3.jpg', title: 'Slide 3' },
-    { image: '/assets/images/slide4.jpg', title: 'Slide 4' }
-  ];
   selectedNodeDetails: string | null = null;
   position = { top: '100px', left: '100px' }; // 消息框初始位置
   isDragging = false;
   dragOffset = { x: 0, y: 0 };
   searchQuery: string = '';  // 搜索框的绑定变量
   searchResults: any[] = []; // 存放搜索结果的数组
+  //轮播图图片
+  imageList:Array<any> = [
+        {img:"/assets/images/slide1.jpg"},
+        {img:"/assets/images/slide2.jpg"},
+        {img:"/assets/images/slide3.jpg"},
+        {img:"/assets/images/slide4.jpg"},
+      ]
   constructor(private http: HttpClient) {}
+
   navigateToLink() {
     // 替换为吉州窑小程序的实际链接
     console.log("吉州窑小程序")
   }
   
   ngAfterViewInit() {
-    // 初始化 Swiper
-    const swiper = new Swiper('.swiper-container', {
-      autoplay: {
-        delay: 3000,
-        disableOnInteraction: false,
-      },
-      loop: true,
-      pagination: {
-        el: '.swiper-pagination',
-        clickable: true,
-      },
-    });
-    console.log('Swiper initialized');
     // 初始化知识图谱
     this.createGraph();
   }

src/lib/comp-swiper/comp-swiper.component.html

@@ -0,0 +1,22 @@
+<!-- 轮播图主容器 -->
+<div class="swiper" [style.height]="height">
+  <!-- 轮播图的必要包装容器 -->
+  <div class="swiper-wrapper">
+    <!-- 单个轮播项 -->
+    @for(slide of list; track slide) {
+      <div class="swiper-slide">
+        <!-- 判断当前slide是否有图片 -->
+        @if(slide?.img) {
+          <img [src]="slide?.img">
+        }
+      </div>
+    }
+  </div>
+  <!-- 分页 -->
+  <div class="swiper-pagination"></div>
+  <!-- 导航按钮 -->
+  <div class="swiper-button-prev"></div>
+  <div class="swiper-button-next"></div>
+  <!-- 滚动条 -->
+  <div class="swiper-scrollbar"></div>
+</div>

src/lib/comp-swiper/comp-swiper.component.scss

@@ -0,0 +1,16 @@
+/* 引入 Swiper 样式 */
+@import 'swiper/css';
+@import 'swiper/css/navigation';
+@import 'swiper/css/pagination';
+.swiper{
+    min-height: 225px;
+    .swiper-slide{
+        width:100%;
+        height:225px;
+        img{
+            height:100%;
+            width:100%;
+            object-fit: cover;
+        }
+    }
+}

src/lib/comp-swiper/comp-swiper.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { CompSwiperComponent } from './comp-swiper.component';
+// 测试 CompSwiperComponent 组件
+describe('CompSwiperComponent', () => {
+  let component: CompSwiperComponent;// 组件实例
+  let fixture: ComponentFixture<CompSwiperComponent>;// 组件测试容器
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [CompSwiperComponent],// 导入组件
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CompSwiperComponent); // 创建组件实例
+    component = fixture.componentInstance;// 获取组件实例
+    fixture.detectChanges();// 检测更改
+
+  }));
+  // 测试：组件是否正确创建
+  it('should create', () => {
+    expect(component).toBeTruthy();// 断言组件实例存在
+  });
+});

src/lib/comp-swiper/comp-swiper.component.ts

@@ -0,0 +1,51 @@
+import { Component, AfterViewInit, Input } from '@angular/core';
+// 导入 SwiperJS
+import Swiper from 'swiper';
+
+interface SwiperSlide{
+  title?:string // 轮播图标题
+  img?:string // 轮播图图片链接
+  innerHTML?:string // 轮播图内嵌的HTML
+}
+// 定义组件
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'app-comp-swiper',
+  templateUrl: './comp-swiper.component.html',
+  styleUrls: ['./comp-swiper.component.scss'],
+  standalone: true,
+})
+export class CompSwiperComponent  implements AfterViewInit {
+  // 输入属性：轮播图数据
+  @Input() list:SwiperSlide[] = []
+  /**
+   * 轮播图参数
+   * @see https://swiperjs.com/swiper-api
+   */
+  @Input() options:any
+  // 输入属性：轮播图的高度和宽度
+  @Input() height:string = "225px";
+  @Input() width:string = "100%";
+  constructor() { }
+  // 视图渲染完成后初始化 Swiper
+  ngAfterViewInit() {
+
+    let defaultOptions:any = {
+      loop:true,// 开启循环播放
+      pagination: {
+        el: '.swiper-pagination',
+      },
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+    }
+    // 如果传入了自定义配置，则合并到默认配置中
+    if(this.options){
+      Object.keys(this.options).forEach(key=>[
+        defaultOptions[key] = this.options[key]
+      ])
+    }
+    const swiper = new Swiper(".swiper",defaultOptions);
+  }
+}