拆分窗格内的 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> 的直系子代。但是，您仍然可以使用 angular 路由创建单独的菜单组件，例如：

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

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

IonicV4 Menu Component inside Split Pane not showing

ionic-framework

angular

ionic4