css - Angular9/Ionic 5 イオン分割ペインの問題

何らかの理由で私の理解を超えて、イオン分割ペイン要素で問題が発生しています。

分割ペイン要素を削除すると、ルーターコンセントは正常に機能します。ログインが成功すると、My nav が表示されます。唯一の問題は、デスクトップ画面でもクリックしてメニューを開くモバイル フィール Web アプリを持っていることです。 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/Ionic 5

なぜ他のファイルを見る必要があるのか​​わかりませんが、やはり何が問題なのかわかりません。1 行追加していただければ、関連ファイルを共有できます。

app-routing.module.ts コードを共有します

2020 年 9 月 3 日 9:39

app-routing.module.ts を追加しました

2020 年 9 月 3 日 13:39

2 つの質問に答えるには:

A: これは、[when]="true" を使用したためだと思います。 <イオン分割ペイン> 内。 ドキュメントに従って値を変更してみてください。

B: これは、ルーターのコンセントが <ion-split-pane> の外側にある必要があるためです。要素なので、代わりに:

<イオンルーターアウトレットID="メインコンテンツ" #コンテンツメイン> </イオンルーターアウトレット> </ion-split-pane>

次のように試してください:

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

1

1

すごいですね、今日は助かりました！

2023 年 9 月 21 日 12:12