Angular Ionic：添加routerLink时，选项卡栏消失

目前我正在开发一款带有angular和tabs模板的ionic 6应用程序。当我尝试使用routerLink或href在ion项目上添加链接时，选项卡栏消失。我是爱奥尼亚的新手，如果你知道问题出在哪里，我会感谢你的帮助

这是我当前在我的一个页面的html中使用的代码：

<ion-card>
 <ion-item class="tab1-item" routerLink="/tab2" routerDirection="forward">
  <img src="assets/gif/image.gif">  
 </ion-item>  
</ion-card>

App-routing-module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'powerChart',
        loadChildren: () => import('../tab-power-chart/tab-power-chart.module').then(m => m.TabPowerChartPageModule)
      },
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
    ]
  },

{
    path: '',
    redirectTo: '/tabs/powerChart',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

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: 'tab-power-chart',
    loadChildren: () => import('./tab-power-chart/tab-power-chart.module').then( m => m.TabPowerChartPageModule)
  },
  {
    path: 'tab1',
    loadChildren: () => import('./tab1/tab1.module').then( m => m.Tab1PageModule)
  },
  {
    path: 'tab2',
    loadChildren: () => import('./tab2/tab2.module').then( m => m.Tab2PageModule)
  },
  {
    path: 'tab3',
    loadChildren: () => import('./tab3/tab3.module').then( m => m.Tab3PageModule)
  }

];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

和tab1-routing.module.ts，以确保：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { Tab1Page } from './tab1.page';



const routes: Routes = [
  {
    path: '',
    component: Tab1Page,

    }
  ];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class DashboardPageRoutingModule {}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { Tab1Page } from './tab1.page';



const routes: Routes = [
  {
    path: '',
    component: Tab1Page,

    }
  ];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class DashboardPageRoutingModule {}