1

src/app/bookcoach/bookcoach.component.html

@@ -0,0 +1,3 @@
+<p>
+  bookcoach works!
+</p>

src/app/bookcoach/bookcoach.component.spec.ts

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

src/app/bookcoach/bookcoach.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-bookcoach',
+  templateUrl: './bookcoach.component.html',
+  styleUrls: ['./bookcoach.component.scss'],
+  standalone: true,
+})
+export class BookcoachComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/information/information.component.html

@@ -102,8 +102,8 @@
     </div>
 
     <!-- 预约按钮 -->
-    <div class="booking-section">
-      <ion-button expand="block" class="booking-btn" (click)="bookCoach()">
+    <div class="booking-section" (click)="bookCoach()">
+      <ion-button expand="block" class="booking-btn">
         <ion-icon name="calendar-outline" slot="start"></ion-icon>
         教练陪练
       </ion-button>

src/app/information/information.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-information',
@@ -10,12 +11,12 @@ import { IonicModule } from '@ionic/angular';
   imports: [CommonModule, IonicModule]
 })
 export class InformationComponent implements OnInit {
-  constructor() { }
+  constructor(private router: Router,) { }
 
   ngOnInit() {}
 
   bookCoach() {
     // 实现预约功能
-    console.log('预约教练');
+    this.router.navigate(['tabs/book-coach']);
   }
 }

src/app/tabs/tabs.routes.ts

@@ -56,6 +56,11 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../information/information.component').then((m) => m.InformationComponent),
       },
+      {
+        path: 'book-coach',
+        loadComponent: () =>
+          import('../bookcoach/bookcoach.component').then((m) => m.BookcoachComponent),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',