创建search页面和几个页面搜索按钮的跳转

src/app/app-routing.module.ts

@@ -1,23 +1,27 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [
-  {
-    path: '',
-    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
-  },
-  {
-    path: 'setting',
-    loadChildren: () => import('./setting/setting.module').then(m => m.SettingPageModule)
-  },{
-    path: 'smovies',
-    loadChildren: () => import('./tab2/smovies/smovies.module').then( m => m.SMoviesPageModule)
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
+  },
+  {
+    path: 'setting',
+    loadChildren: () => import('./setting/setting.module').then(m => m.SettingPageModule)
+  },{
+    path: 'smovies',
+    loadChildren: () => import('./tab2/smovies/smovies.module').then( m => m.SMoviesPageModule)
+  },
  {
+    path: 'search',
+    loadChildren: () => import('./search/search.module').then( m => m.SearchPageModule)
   }
-];
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}
+
+];
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

src/app/place/place.page.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-
 import { Router } from '@angular/router';
 import { NavController } from '@ionic/angular';
 @Component({
@@ -9,12 +8,10 @@ import { NavController } from '@ionic/angular';
 })
 export class PlacePage implements OnInit {
 
-  constructor(private navCtrl: NavController) {}
+  constructor(private navCtrl: NavController,private router: Router) {}
 
   search() {
-    // this.router.navigate(['/blank-page']); // 替换成你的空白页面路由路径
-    // 导航到空白页面
-    console.log('Navigating to Blank page');
+    this.router.navigate(['/search']); // 替换成你的 setting 页面路由路径
   }
 
   goToBlankPage() {

src/app/search/search-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SearchPage } from './search.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SearchPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SearchPageRoutingModule {}

src/app/search/search.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { SearchPageRoutingModule } from './search-routing.module';
+
+import { SearchPage } from './search.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SearchPageRoutingModule
+  ],
+  declarations: [SearchPage]
+})
+export class SearchPageModule {}

src/app/search/search.page.html

@@ -0,0 +1,40 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>搜索</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-searchbar placeholder="请输入搜索内容">
+    <ion-button slot="end" fill="clear" (click)="search()">
+      <ion-icon name="search"></ion-icon>
+    </ion-button>
+  </ion-searchbar>
+
+  <ion-list>
+    <ion-list-header>大家都在搜</ion-list-header>
+    <ion-item *ngFor="let item of hotSearches">{{ item }}</ion-item>
+  </ion-list>
+  
+  <div class="list-container">
+    <ion-list>
+      <ion-list-header>
+        <ion-row justify-content-between align-items-center>
+          <ion-col size="auto">
+            历史记录
+          </ion-col>
+          <ion-col size="auto">
+            <ion-button color="danger" (click)="deleteAllHistory()">删除所有记录</ion-button>
+          </ion-col>
+        </ion-row>
+      </ion-list-header>
+      <ion-item *ngFor="let item of searchHistory">
+        {{ item }}
+        <ion-icon slot="end" name="trash" (click)="deleteHistoryItem(item)"></ion-icon>
+      </ion-item>
+    </ion-list>
+  </div>
+</ion-content>

src/app/search/search.page.scss

@@ -0,0 +1,31 @@
+ion-list-header {
+    font-weight: bold;
+  }
+  
+  ion-item {
+    cursor: pointer;
+  }
+
+  ion-list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  ion-list-header ion-button {
+    margin-top: 0;
+  }
+
+  .searchbar-container {
+    margin-bottom: 20px;
+  }
+  
+  .list-container {
+    padding: 0 20px;
+  }
+  
+  ion-list-header ion-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }

src/app/search/search.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SearchPage } from './search.page';
+
+describe('SearchPage', () => {
+  let component: SearchPage;
+  let fixture: ComponentFixture<SearchPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/search/search.page.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { NavController } from '@ionic/angular';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-search',
+  templateUrl: './search.page.html',
+  styleUrls: ['./search.page.scss'],
+})
+
+export class SearchPage {
+  hotSearches: string[] = ['JavaScript', 'Angular', 'Ionic', 'TypeScript'];
+  searchHistory: string[] = ['React', 'Vue', 'Node.js'];
+
+  search() {
+    // 实现搜索功能的逻辑
+  }
+
+  deleteHistoryItem(item: string) {
+    const index = this.searchHistory.indexOf(item);
+    if (index > -1) {
+      this.searchHistory.splice(index, 1);
+    }
+  }
+
+  deleteAllHistory() {
+    this.searchHistory = [];
+  }
+}

src/app/tab1/tab1.page.ts

@@ -15,9 +15,7 @@ export class Tab1Page implements OnInit {
   constructor(private router: Router) {}
 
   search() {
-    // this.router.navigate(['/blank-page']); // 替换成你的空白页面路由路径
-    // 导航到空白页面
-    console.log('Navigating to Blank page');
+    this.router.navigate(['/search']); // 替换成你的 setting 页面路由路径
   }
 
   navigateToBannerPage(banner: string) {

src/app/tab2/tab2.page.ts

@@ -24,8 +24,6 @@ export class Tab2Page {
 
 
   search() {
-    // this.router.navigate(['/blank-page']); // 替换成你的空白页面路由路径
-    // 导航到空白页面
-    console.log('Navigating to Blank page');
+    this.router.navigate(['/search']); // 替换成你的 setting 页面路由路径
   }
 }

src/app/tab3/tab3.page.ts

@@ -9,12 +9,10 @@ import { NavController } from '@ionic/angular';
   styleUrls: ['tab3.page.scss']
 })
 export class Tab3Page {
-  constructor(private navCtrl: NavController) {}
+  constructor(private navCtrl: NavController,private router: Router) {}
 
   search() {
-    // this.router.navigate(['/blank-page']); // 替换成你的空白页面路由路径
-    // 导航到空白页面
-    console.log('Navigating to Blank page');
+    this.router.navigate(['/search']); // 替换成你的 setting 页面路由路径
   }
 
   goToBlankPage() {