我的侧菜单覆盖我的主页'；使用Angular在Ionic4下创建html内容

我使用Ionic4/Angular，我刚刚使用以下教程创建了一个项目： 我没有碰任何东西，比如路由等等

这是我的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>

---

您的实现不正确。考虑以下从

菜单

---

请注意，如上所示，ion拆分窗格中缺少contentId。然后相关。。。您还缺少离子路由器出口的id。第三，您还应该如上所示将contentId添加到ion菜单。

请同时发布组件代码谢谢您的回答。我用代码Oh my godness编辑了我的帖子，我所关注的教程显示了id=“”，所以我认为这是处理的方式。但在加上这个+身份证之后，一切都像一个符咒。Thaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa。如果不需要，没有理由使用旧版本。（angular也一样）安装过程非常混乱，我要么错了正在使用的版本，要么安装了错误的版本。对于那个项目，我将继续使用它，但我记得下次检查。谢谢你的帮助！

    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
  <ion-router-outlet></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>

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

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();
    });
  }
}

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