Angular9/Ionic 5 Ion-Split-pane 问题答案

【问题标题】：Angular9/Ionic 5 Ion-Split-pane issuesAngular9/Ionic 5 Ion-Split-pane 问题
【发布时间】：2020-09-03 03:17:40
【问题描述】：

由于某些我无法理解的原因，我遇到了 ion-split-pane 元素的问题。

如果我删除拆分窗格元素，路由器插座就可以正常工作。登录成功后会显示我的导航。唯一的问题是我有一个移动感觉的网络应用程序：/ 也可以在桌面屏幕上单击打开菜单。我知道我可以使用 CSS 和引导程序来想出一些东西。但令我恼火的是我无法弄清楚这一点。帮助！

它是：
A. 不根据屏幕大小做拆分窗格的事情
B. 不知何故，它会干扰页面加载到路由器插座中

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>

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 {}

Angular 9/离子 5

我不明白您为什么需要查看其他文件，但我还是不知道出了什么问题。所以放下一行，我可以分享相关文件。

【问题讨论】：

分享你的app-routing.module.ts代码
添加了 app-routing.module.ts

标签： css angular typescript ionic-framework mobile

【解决方案1】：

回答您的 2 个问题：

A：我认为这是因为您在<ion-split-pane> 中使用了[when]="true"。尝试根据documentation更改值。

B：这是因为路由器出口应该在<ion-split-pane>元素之外，所以不是：

<ion-router-outlet id="main-content" #content main> </ion-router-outlet> </ion-split-pane>

尝试：

</ion-split-pane>
<ion-router-outlet id="main-content" #content main></ion-router-outlet>

【讨论】：