Ionic ion-tab阻止我与页面交互

6jygbczu  于 2023-08-01  发布在  Ionic
关注(0)|答案(2)|浏览(133)

我有一个离子页面,我有一个按钮和一个组件包括在内。包含组件(选项卡)会阻止我与按钮交互,因为它会在按钮上创建一个层。
我不能找到一种方法来正确导入我的组件,所以我正在寻找建议。多谢了。
我的设置. html

<ion-header [translucent]="true">
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>
            Paramètres
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <app-auth-form *ngIf="isRegistered == false" (formSubmitted)="link($event)"[actionButtonText]="'S\'enregistrer'"></app-auth-form>
    <ion-button expand="block">
        test
    </ion-button>

</ion-content>

<app-bottom-menu #bottomMenuComponent></app-bottom-menu>

字符串
当然我已经在设置中添加了。ts:

@ViewChild(AuthFormComponent) loginForm: AuthFormComponent;


我在settings. module. ts中同时有FormsModule和ReactiveFormsModule。
下面是我的组件:

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button (click)="this.navCtrl.navigateRoot('/home')">
      <ion-icon name="star"></ion-icon>
      <ion-label>Abonnements</ion-label>
      <ion-badge>6</ion-badge>
    </ion-tab-button>

    <ion-tab-button (click)="this.navCtrl.navigateForward('/discover')">
      <ion-icon name="eye"></ion-icon>
      <ion-label>Découvrir</ion-label>
    </ion-tab-button>

    <ion-tab-button (click)="this.navCtrl.navigateRoot('/settings')">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Paramètres</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>


我对ionic还是个新手,所以如果你认为我导入东西/编码页面(ion-content和attributes)的方式不好。我将很高兴得到建议。

  • 谢谢-谢谢
lf5gs5x2

lf5gs5x21#

在尝试修改离子标签以防止它使我无法点击页面的CSS时,我能够解决这个问题:
在app.component.html中

<ion-app>
    <ion-router-outlet></ion-router-outlet>
</ion-app>
<app-bottom-menu #bottomMenuComponent></app-bottom-menu>

字符串
在app.module.ts中

declarations: [AppComponent, BottomMenuComponent],


我不知道为什么它以前不工作。我没有搜索就找到了答案。也许它会帮助其他人。

wfypjpf4

wfypjpf42#

fixed remove <ion-tabs #myTabs> tag, example

<ion-tabs #myTabs>   //<-------------- remove this tag. 
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="play-circle"></ion-icon>
      Listen Now
    </ion-tab-button>
    <ion-tab-button tab="radio">
      <ion-icon name="radio"></ion-icon>
      Radio
    </ion-tab-button>
    <ion-tab-button tab="library">
      <ion-icon name="library"></ion-icon>
      Library
    </ion-tab-button>
    <ion-tab-button tab="search">
      <ion-icon name="search"></ion-icon>
      Search
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

字符串

相关问题