tab3

src/app/app-routing.module.ts

@@ -10,10 +10,7 @@ const routes: Routes = [
     path: 'tab4',
     loadChildren: () => import('./tab4/tab4.module').then( m => m.Tab4PageModule)
   },
-  { path: 'comment-reply', loadChildren: () => import('./comment-reply/comment-reply.module').then(m => m.CommentReplyPageModule) },
-  { path: 'like-favorite', loadChildren: () => import('./like-favorite/like-favorite.module').then(m => m.LikeFavoritePageModule) },
-  { path: 'follow', loadChildren: () => import('./follow/follow.module').then(m => m.FollowPageModule) },
-  { path: 'system-message', loadChildren: () => import('./system-message/system-message.module').then(m => m.SystemMessagePageModule) },
+  
 ];
 @NgModule({
   imports: [

src/app/app.module.ts

@@ -6,10 +6,12 @@ import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,CommonModule,FormsModule],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [AppComponent],
 })

src/app/comment-reply/comment-reply-routing.module.ts

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

src/app/comment-reply/comment-reply.module.ts

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

src/app/comment-reply/comment-reply.page.html

@@ -1,13 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>comment-reply</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">comment-reply</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>

src/app/comment-reply/comment-reply.page.spec.ts

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

src/app/comment-reply/comment-reply.page.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-comment-reply',
-  templateUrl: './comment-reply.page.html',
-  styleUrls: ['./comment-reply.page.scss'],
-})
-export class CommentReplyPage implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

src/app/explore-container/explore-container.component.html

@@ -1,4 +0,0 @@
-<div id="container">
-  <strong>{{ name }}</strong>
-  <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
-</div>

src/app/explore-container/explore-container.component.scss

@@ -1,27 +0,0 @@
-#container {
-  text-align: center;
-
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-#container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-#container p {
-  font-size: 16px;
-  line-height: 22px;
-
-  color: #8c8c8c;
-
-  margin: 0;
-}
-
-#container a {
-  text-decoration: none;
-}

src/app/explore-container/explore-container.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
-import { ExploreContainerComponent } from './explore-container.component';
-
-describe('ExploreContainerComponent', () => {
-  let component: ExploreContainerComponent;
-  let fixture: ComponentFixture<ExploreContainerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ExploreContainerComponent],
-      imports: [IonicModule.forRoot()]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ExploreContainerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/explore-container/explore-container.component.ts

@@ -1,12 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'app-explore-container',
-  templateUrl: './explore-container.component.html',
-  styleUrls: ['./explore-container.component.scss'],
-})
-export class ExploreContainerComponent {
-
-  @Input() name?: string;
-
-}

src/app/explore-container/explore-container.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { IonicModule } from '@ionic/angular';
-
-import { ExploreContainerComponent } from './explore-container.component';
-
-@NgModule({
-  imports: [ CommonModule, FormsModule, IonicModule],
-  declarations: [ExploreContainerComponent],
-  exports: [ExploreContainerComponent]
-})
-export class ExploreContainerComponentModule {}

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

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

src/app/follow/follow.module.ts

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

src/app/follow/follow.page.html

@@ -1,13 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>follow</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">follow</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>

src/app/follow/follow.page.spec.ts

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

src/app/follow/follow.page.ts

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

src/app/like-favorite/like-favorite-routing.module.ts

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

src/app/like-favorite/like-favorite.module.ts

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

src/app/like-favorite/like-favorite.page.html

@@ -1,13 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>like-favorite</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">like-favorite</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>

src/app/like-favorite/like-favorite.page.spec.ts

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

src/app/like-favorite/like-favorite.page.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-like-favorite',
-  templateUrl: './like-favorite.page.html',
-  styleUrls: ['./like-favorite.page.scss'],
-})
-export class LikeFavoritePage implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

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

@@ -13,4 +13,6 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class Tab3PageRoutingModule {}
+export class Tab3PageRoutingModule {
+  
+}

src/app/tab3/tab3.page.html

@@ -10,11 +10,25 @@
 </ion-header>
 
 <ion-content>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>最新推荐</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-avatar slot="start">
+        <ion-img src="Assets/avatar.jpg"></ion-img>
+      </ion-avatar>
+      <ion-label>用户名</ion-label>
+      <ion-label>标签</ion-label>
+      <ion-label>聊天内容</ion-label>
+      <ion-button expand="block">免费提问</ion-button>
+    </ion-card-content>
+  </ion-card>
   <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
-  <ion-toolbar>
-   <ion-segment value="explore">
+  <div style="display: flex; flex-direction: column;">
+   <ion-segment [ngModelOptions]="{standalone:true}" [(ngModel)]="activeTab" (ionChange)="changeTab($event)">
     <ion-segment-button value="explore">
-      <ion-icon (click)="navigateToPage('comment-reply')" name="chatbubble-ellipses"></ion-icon>
+      <ion-icon name="chatbubble-ellipses"></ion-icon>
       评论和回复
     </ion-segment-button>
     <ion-segment-button value="video">
@@ -22,27 +36,26 @@
       赞与收藏
     </ion-segment-button>
     <ion-segment-button value="search">
-      <ion-icon (click)="navigateToPage('follow')" name="person-add"></ion-icon>
+      <ion-icon name="person-add"></ion-icon>
       新增关注
     </ion-segment-button>
     <ion-segment-button value="system">
-      <ion-icon (click)="navigateToPage('system-message')" name="notifications"></ion-icon>
+      <ion-icon name="notifications"></ion-icon>
       系统消息
     </ion-segment-button>
    </ion-segment>
-  </ion-toolbar>
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>最新推荐</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-avatar slot="start">
-        <ion-img src="Assets/avatar.jpg"></ion-img>
-      </ion-avatar>
-      <ion-label>用户名</ion-label>
-      <ion-label>标签</ion-label>
-      <ion-label>聊天内容</ion-label>
-      <ion-button expand="block">免费提问</ion-button>
-    </ion-card-content>
-  </ion-card>
+   <div *ngIf="activeTab === 'explore'" >
+    1
+   </div>
+   <div *ngIf="activeTab === 'video'">
+    2
+   </div>
+   <div *ngIf="activeTab === 'search'">
+    3
+   </div>
+   <div *ngIf="activeTab === 'system'">
+    4
+   </div>
+  </div>
+
 </ion-content>

src/app/tab3/tab3.page.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
+
 @Component({
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
@@ -9,6 +10,11 @@ import { Router } from '@angular/router';
 export class Tab3Page {
 
   constructor(private router: Router) {}
+
+  activeTab:string = 'explore';
+  changeTab(event:any){
+    this.activeTab = event.detail.value
+  }
   openFeedbackPage() {
     // 打开反馈页面
   }