拆分窗格内的 IonicV4 菜单组件未显示答案

【问题标题】：IonicV4 Menu Component inside Split Pane not showing拆分窗格内的 IonicV4 菜单组件未显示
【发布时间】：2018-12-07 13:34:25
【问题描述】：

我正在尝试使用 Ionic V4 构建应用程序。我正在关注 Ionic Docs，但即使是最简单的事情也令人头疼。

我想显示一个带有侧边菜单的拆分窗格。侧边菜单是一个带有这个 html 的组件：

menu.component.html

<ion-menu contentId="content1">
<ion-header>
    <ion-toolbar>
        <ion-title>Menú</ion-title>
    </ion-toolbar>
</ion-header>

在另一边

app.component.html

<ion-app>
<ion-split-pane>
    <app-menu></app-menu>
    <ion-router-outlet id="content1" main></ion-router-outlet>
</ion-split-pane>

我得到一个像这样的空白侧边菜单

但是，如果我粘贴 menu.component 的 HTML 实例，我会发现一切正常

编辑：我忘了说我使用的是 Ionic 4 beta 17

【问题讨论】：

标签： angular ionic-framework ionic4

【解决方案1】：

我认为出于某种原因<ion-menu> 必须是<ion-split-pane> 的直接子代。但是，您仍然可以使用角度路由创建一个单独的菜单组件，例如：

const routes: Routes = [
  {
    path: '',
    component: MenuPage,
    children: [
      { path: 'tab1', loadChildren: './tab1/tab1.module#Tab1PageModule' },
      { path: 'tab2', loadChildren: './tab2/tab2.module#Tab2PageModule' },
      { path: 'tab3', loadChildren: './tab3/tab3.module#Tab3PageModule' },
      { path: '', redirectTo: '/tab1', pathMatch: 'full' },
    ],
  },

MenuPage 模板包含带有菜单的 ion-split-pane 和 ion-router-outlet 以将实际内容渲染到：

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

这是完整的工作示例：https://github.com/MattiLehtinen/ionic4-split-pane-menu-sample

【讨论】：