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

ionic generate page home

<ion-header>
  <ion-toolbar>
    <ion-title>
      我的主页
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-card-title>
        欢迎来到我的主页
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
      这是一个示例文本
    </ion-card-content>
  </ion-card>
</ion-content>

<ion-app>
  <ion-menu side="start" contentId="main-content">
    <ion-header>
      <ion-toolbar>
        <ion-title>
          菜单
        </ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
          <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
            <ion-icon [name]="p.icon" slot="start"></ion-icon>
            <ion-label>{{ p.title }}</ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>

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

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  public pages = [
    {
      title: '首页',
      url: '/home',
      icon: 'home'
    },
    {
      title: '设置',
      url: '/settings',
      icon: 'settings'
    }
  ];
}