Css Angular9/Ionic 5离子分裂窗格问题

由于一些我无法理解的原因，我对离子分裂窗格元素有问题

如果我删除拆分窗格元素，路由器插座就可以正常工作。登录成功后显示我的导航。唯一的问题是，我有一个移动感觉web应用程序，在桌面屏幕上也可以点击打开菜单。我知道我可以用CSS和bootstrap来做点什么。但我不明白这一点让我很恼火。救命啊

它是：
A.不根据屏幕大小进行拆分窗格操作
不知何故，它干扰了加载到路由器出口的页面

app.component.html：

<ion-app>
  <ion-split-pane contentId="main-content" [when]="true">
    <ion-menu content="content" *ngIf="this.authInfo | async" contentId="main-content" type="overlay">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
          <ion-menu-button slot="end">
            <ion-icon name="close-circle-outline"></ion-icon>
          </ion-menu-button>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list id="profile-section">
          <ion-menu-toggle auto-hide="false" *ngFor="let k of orderedKeys();">
            <ion-item (click)="handleClick(k)"  detail="false"  lines="none" class="active" [class.selected]="testSelection(appPages[k].name)">
              <ion-icon slot="start" [name]="appPages[k].icon + '-outline'"></ion-icon>
              <ion-label>{{appPages[k].title}}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    
    <ion-header *ngIf="this.authInfo | async">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>{{section}}</ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-router-outlet id="main-content" #content main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

角度9/5

---

我不明白你为什么需要查看其他文件，但我还是不知道出了什么问题。因此，请留言，我可以共享相关文件。

共享您的

app-routing.module.ts

code添加的app-routing.module.ts共享您的

app-routing.module.ts

code添加的app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuardService } from './guards/auth-guard.service';
import { LandingPage } from './landing/landing.page';
import { AdminOnlyGuardService } from './guards/admin-only-guard.service';

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: LandingPage
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'sign-up',
    loadChildren: () => import('./sign-up/sign-up.module').then( m => m.SignUpPageModule)
  },
  {
    path: 'forgot-password',
    loadChildren: () => import('./forgot-password/forgot-password.module').then( m => m.ForgotPasswordPageModule)
  },
  {
    path: 'page-not-found',
    loadChildren: () => import('./page-not-found/page-not-found.module').then( m => m.PageNotFoundPageModule)
  },
  {
    path: 'home',
    canActivate: [AuthGuardService],
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: 'contracts',
    canActivate: [AuthGuardService],
    loadChildren: () => import('./contracts/contracts.module').then( m => m.ContractsPageModule)
  }
  // {
  //   path: 'landing',
  //   loadChildren: () => import('./landing/landing.module').then( m => m.LandingPageModule)
  // }
];

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