我的侧边菜单使用 Angular 在 Ionic4 下覆盖了我主页的 html 内容

Question

我使用 Ionic4/Angular，我刚刚使用以下教程创建了一个项目：https://www.youtube.com/watch?v=5OgqjVbsNuE 路由之类的我都没碰过……

这是我的 app.component.html ：

<ion-app>
  <ion-split-pane>
      <ion-menu type = "overlay">
          <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 appMenu">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-label>{{p.title}}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

产生以下结果：

Menu displayed & fully working, home page not showing

当我将代码更改为此（出于测试目的）时：

    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
  <ion-router-outlet></ion-router-outlet>

home page & menu icon finally displayed but no menu showing

如果我从该代码中删除（再次出于测试目的，我知道这是错误的） <ion-router-outlet main></ion-router-outlet>：

    <ion-app>
  <ion-split-pane>
      <ion-menu type = "overlay">
          <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 appMenu">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-label>{{p.title}}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
  </ion-split-pane>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

产生以下结果： home page only

我想要的是图像 1 和 2：菜单显示和带有图标的主页。

我该怎么做？ 一切似乎都在这段代码中，但我是一个关于 Ionic4/Angular 的完整初学者。

我认为不需要，但这是我主页的 html 代码：

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

<ion-content padding>
  The world is your oyster.
  <p>If you get lost, the <a target = "_blank" rel = "noopener" href = "https://ionicframework.com/docs">docs</a> will be your guide.</p>
</ion-content>

app.component.ts ：

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

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  public appMenu = [
    {title : 'Accueil', url: '/home', icon: 'home'},
    {title : 'Profile', url: '/profil', icon: 'person'},
    {title : 'Lire', url: '/read', icon: 'search'},
    {title : 'Publier', url: '/publish', icon: 'create'},
    {title : 'Ma bibliothèque', url: '/mylibrary', icon: 'book'},
    {title : 'Mes oeuvres', url: '/myworks', icon: 'book'},
    {title : 'Mon abonnement', url: '/mysubscriptions', icon: 'cash'}
  ];
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

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

Answer 1

您的实现不正确。考虑以下取自Ionic Split Pane Docuementation

 <ion-split-pane contentId="main">
  <!--  the side menu  -->
  <ion-menu contentId="main">
    <ion-header>
      <ion-toolbar>
       <ion-title>Menu</ion-title>
      </ion-toolbar>
   </ion-header>
  </ion-menu>

 <!-- the main content -->
 <ion-router-outlet id="main"></ion-router-outlet>

请注意，您缺少 ion-split-pane 中的 contentId，如上所示。然后相关...您还缺少 ion-router-outlet 的 id。第三，您还应该将 contentId 添加到 ion-menu，如上所示。