切换后显示离子菜单，但不可单击

Question

（免责声明：总体而言，我还是离子和编码领域的新手，如果以下术语有误，请在学习过程中告知我。在此先感谢您的帮助）

问题：按下后会显示边栏菜单，但无法单击菜单

背景：我在分割窗格中有一个带有侧面菜单的离子项目设置。它的结构由一个单独的菜单离子页面构成，直接从根页面路由到延迟加载菜单页面，然后菜单路由模块从那里处理子路由以显示不同页面。

我通过执行此youtube教程https://www.youtube.com/watch?v=I82_roQSgco进行了这些设置，>

长话短说，在构建了我的应用程序之后，现在想要设置路由防护，我个人发现，拥有一个空的应用程序组件并路由到菜单作为入口是没有意义的。因此，我想将菜单和路由逻辑移回应用程序组件和应用程序路由。

除了侧菜单外，一切看起来都不错。 如果按下菜单切换按钮，将显示侧面菜单，但是菜单中的按钮无法单击，就好像上面有另一个元素叠加一样。但是，如果我使用的是全角浏览器，则该菜单并不是一开始就隐藏的，它的工作原理还不错。

我只是将html模板中的所有内容从菜单页面移到了选项卡内的应用程序组件html模板中。

我花了数小时参考默认的侧菜单应用程序和以前的工作策略进行故障排除，但我仍然无法弄清楚为什么我不能单击菜单。

下面附有代码，感谢您的帮助

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AngularFireAuthGuard, redirectUnauthorizedTo } from "@angular/fire/auth-guard";
import { AppComponent } from './app.component';

const redirectToLogin = () => redirectUnauthorizedTo(['login']);

const routes: Routes = [
  { 
    //authguard to be implement in the root path
    path: '', 
    component:AppComponent, 
    children:[
      {
        path: 'users',
        loadChildren: './pages/users/users.module#UsersPageModule'
      },
      {
        path: 'students',
        loadChildren: './pages/students/students.module#StudentsPageModule'
      },
      {
        path: '',
        loadChildren: './pages/home/home.module#HomePageModule'
      },
    ]
  },
  {
    //redirect to login page if not logged in
    path: 'login',
    loadChildren: './pages/login/login.module#LoginPageModule'
  }
];

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

<ion-app>
  <ion-split-pane contentId ="content">
    <ion-menu contentId="content">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor = "let p of pages">
            <ion-item [routerLink]="p.url" routerDirection="root" [class.active-item]="selectedPath === p.url">
              {{p.title}}
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-router-outlet id="content" main></ion-router-outlet>
  </ion-split-pane>
</ion-app>
app.component.ts

import { Component, OnInit } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Router, RouterEvent } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit{
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private router:Router,
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  pages = [
    {
      title:'Home',
      url:''
    },
    {
      title:'Students',
      url:'students'
    },
    {
      title:'Users',
      url:'users'
    }
  ]

  selectedPath = '';

  ngOnInit(){
    this.router.events.subscribe((event:RouterEvent) =>{
      this.selectedPath = event.url;
    });
  }
}
home.page.html

（带有离子菜单按钮的空主页）

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

（免责声明：总体而言，我还是离子和编码领域的新手，如果以下术语有误，请在学习过程中告知我。在此先感谢您的帮助）问题：Sidemenu ...

Answer 1

默认情况下，当您加载App-component时，您将迫使路由器插座将App-component用作组件。简单的解决方案是更改您的路线const