拆分窗格中的IonicV4菜单组件未显示

Question

我正在尝试使用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

Answer 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