添加 ion-tabs 后，RouterLink 在 Ion-Button 中不起作用，但在没有标签的情况下可以正常工作，我该如何解决这个问题？

Posted 2023-03-16

【中文标题】添加 ion-tabs 后，RouterLink 在 Ion-Button 中不起作用，但在没有标签的情况下可以正常工作，我该如何解决这个问题？

【英文标题】：RouterLink not work in Ion-Button after adding ion-tabs but work fine without tabs , How can I solve this problem?

【发布时间】：2022-01-21 21:38:49

【问题描述】：

在添加 ion-tab-button 之前一切正常，我有带有路由到另一个页面的 ionic 按钮

当我添加了 ion-tabs 后，点击后路由器链接在按钮中不起作用

我的错误在哪里？！我需要一个解决方案。

这是我的 home.page.html

  <ion-header translucent>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>SERVER STORE</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content fullscreen>

  <ion-grid>
    <ion-row>
      <ion-col size="12">

        <ion-slides pager="true" [options]="slideOptsOne" #slideWithNav
          (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
          <ion-slide *ngFor="let s of sliderOne.slidesItems">
            <img src="assets/s.id.png">
          </ion-slide>
        </ion-slides>

      </ion-col>

    </ion-row>
  </ion-grid>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-button expand="block" [routerLink]="['/iptv-list']" >IPTV List   </ion-button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-button expand="block" [routerLink]="['/sharing']" >Sharing List   </ion-button>
      </ion-col>      </ion-row>
      
            
            

  </ion-grid>

 
</ion-content>

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button >
      <ion-icon name="speedometer"></ion-icon>
      <ion-label>مباريات اليوم</ion-label>
    </ion-tab-button>

    <ion-tab-button >
      <ion-icon name="play-circle"></ion-icon>
      <ion-label>WATCH</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

【参考方案1】：

我找到了解决方案：

添加 <ion-toolbar> 作为 ion-tabs 的父级 解决我的问题