ion-tabs 阻止我与页面交互答案

【问题标题】：ion-tabs prevent me from interacting with the pageion-tabs 阻止我与页面交互
【发布时间】：2021-05-04 10:43:28
【问题描述】：

我有一个离子页面，其中包含一个按钮和一个组件。包含组件（选项卡）会阻止我与按钮交互，因为它会在其顶部创建一个层。

我找不到正确导入组件的方法，因此我正在寻求建议。非常感谢。

我的设置.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>

当然我已经在settings.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 新手，所以如果您认为我导入内容/编码页面（离子内容和属性）的方式不好。我很高兴得到建议。

谢谢。

【问题讨论】：

标签： angular typescript ionic-framework

【解决方案1】：

在搞乱 CSS 试图修改 ion-tabs 以防止它使我无法点击页面时，我能够解决这个问题：

在 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],

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

【讨论】：