11.26

travel-app/src/app/tab1/tab1.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common'; // 导入 CommonModule
-import { FormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
 import { IonicModule } from '@ionic/angular'; // 导入 IonicModule
 
 import { Tab1Page } from './tab1.page'; // 导入当前页面组件
@@ -8,7 +8,7 @@ import { Tab1Page } from './tab1.page'; // 导入当前页面组件
 @NgModule({
   imports: [
     CommonModule, // 确保 CommonModule 在 imports 中
-    FormsModule,
+    FormsModule, // 确保 FormsModule 在 imports 中
     IonicModule // 确保 IonicModule 在 imports 中
   ],
   declarations: [Tab1Page] // 声明当前页面组件

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

@@ -12,7 +12,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<ion-content>
   <ion-searchbar 
     placeholder="输入目的地或景点" 
     showCancelButton="focus" 
@@ -89,11 +89,11 @@
           <ion-label>
             <h2>{{ feedback.username }}</h2>
             <p>{{ feedback.content }}</p>
-            <ion-icon [ngClass]="{'star-filled': feedback.rating >= 1, 'star-empty': feedback.rating < 1}" name="star"></ion-icon>
-            <ion-icon [ngClass]="{'star-filled': feedback.rating >= 2, 'star-empty': feedback.rating < 2}" name="star"></ion-icon>
-            <ion-icon [ngClass]="{'star-filled': feedback.rating >= 3, 'star-empty': feedback.rating < 3}" name="star"></ion-icon>
-            <ion-icon [ngClass]="{'star-filled': feedback.rating >= 4, 'star-empty': feedback.rating < 4}" name="star"></ion-icon>
-            <ion-icon [ngClass]="{'star-filled': feedback.rating >= 5, 'star-empty': feedback.rating < 5}" name="star"></ion-icon>
+            <div>
+              <ion-icon *ngFor="let star of [].constructor(5); let i = index" 
+                        [name]="i < feedback.rating ? 'star' : 'star-outline'">
+              </ion-icon>
+            </div>
           </ion-label>
         </ion-item>
       </ion-list>

travel-app/src/app/tab1/tab1.page.spec.ts

@@ -1,4 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
 
 import { Tab1Page } from './tab1.page';
 
@@ -7,6 +9,11 @@ describe('Tab1Page', () => {
   let fixture: ComponentFixture<Tab1Page>;
 
   beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [Tab1Page],
+      imports: [IonicModule.forRoot(), FormsModule]
+    }).compileComponents();
+
     fixture = TestBed.createComponent(Tab1Page);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -15,4 +22,4 @@ describe('Tab1Page', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-});
+});

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

@@ -1,6 +1,6 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { 
-  IonAvatar, 
   IonButton, 
   IonCard, 
   IonCardContent, 
@@ -14,33 +14,80 @@ import {
   IonHeader, 
   IonToolbar, 
   IonTitle, 
-  IonContent, 
-  IonButtons 
-} from '@ionic/angular'; // 从Ionic导入组件
+  IonContent,  
+  IonButtons, 
+  IonTabButton,
+  IonIcon,
+  IonTabBar,
+  IonMenuButton
+} from '@ionic/angular/standalone'; // 从Ionic导入组件
+import { IonAvatar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
+  standalone: true,
+  imports:[
+    CommonModule,
+    IonAvatar, 
+    IonButton, 
+    IonCard, 
+    IonCardContent, 
+    IonCardHeader, 
+    IonCardTitle, 
+    IonItem, 
+    IonLabel, 
+    IonList, 
+    IonSearchbar, 
+    IonThumbnail, 
+    IonHeader, 
+    IonToolbar, 
+    IonTitle, 
+    IonContent, 
+    IonButtons,
+    IonTabButton,
+    IonTabBar,
+    IonMenuButton,
+    IonIcon
+  ]
 })
 export class Tab1Page {
-  recommendedRoutes = []; // 推荐路线数据
-  personalizedRoutes = []; // 个性化推荐数据
-  popularAttractions = []; // 热门景点数据
-  userFeedbacks = []; // 用户反馈数据
+  recommendedRoutes = [
+    { title: '滕王阁经典游', description: '探索滕王阁的美丽与历史', thumbnail: 'assets/images/tengwangge.jpg' },
+    { title: '南昌博物馆', description: '了解南昌的文化与历史', thumbnail: 'assets/images/nanchangmuseum.jpg' }
+  ]; // 推荐路线数据示例
+
+  personalizedRoutes = [
+    { title: '情侣浪漫之旅', reason: '适合情侣，包含浪漫晚餐和夜景' },
+    { title: '家庭亲子游', reason: '适合家庭，包含儿童乐园' }
+  ]; // 个性化推荐数据示例
+
+  popularAttractions = [
+    { name: '八一起义纪念馆', description: '纪念南昌起义的历史', image: 'assets/images/yijijiang.jpg' },
+    { name: '南昌青山湖', description: '美丽的湖泊，适合休闲游玩', image: 'assets/images/qingshanhu.jpg' }
+  ]; // 热门景点数据示例
+
+  userFeedbacks = [
+    { userAvatar: 'assets/images/user1.jpg', username: '用户1', content: '这条路线非常棒！', rating: 5 },
+    { userAvatar: 'assets/images/user2.jpg', username: '用户2', content: '我喜欢这个地方！', rating: 4 }
+  ]; // 用户反馈数据示例
 
   constructor() {}
 
   onSearch(event: any) {
     const query = event.target.value;
-    // 处理搜索逻辑
+    // 处理搜索逻辑，例如过滤推荐路线或热门景点
+    console.log('Searching for:', query);
   }
 
   viewRoute(route: any) {
     // 导航到路线详情页面
+    console.log('Viewing route:', route);
   }
 
   viewAttraction(attraction: any) {
     // 导航到景点详情页面
+    console.log('Viewing attraction:', attraction);
   }
 }