模具：<ion-pane-split>中的<ion-nav>无法正常工作

Question

这是我的模具和离子版

"dependencies": {
    "@ionic/core": "one"
  },
  "devDependencies": {
    "@stencil/core": "1.0.0-beta.8"
  }

我试图在<ion-menu>中使用<ion-split-pane>，就像在离子应用程序中一样，这是我的代码（这是该代码https://github.com/modemlooper/stencil-pwa-sidemenu的原始存储库）：

app-root.tsx

[...]
render() {
    return (
      <ion-app>
        <ion-router useHash={false}>
          <ion-route url="/" component="app-home" />
          <ion-route url="/profile/:name" component="app-profile" />
        </ion-router>

        <ion-split-pane when="lg">
          <ion-menu side="start">
            <ion-header>
              <ion-toolbar color="primary" />
            </ion-header>

            <ion-content forceOverscroll={false}>
              <ion-list>
                <ion-menu-toggle autoHide={false}>
                  <ion-item href="/">
                    <ion-icon slot="start" name="home" />
                    <ion-label>Home</ion-label>
                  </ion-item>
                </ion-menu-toggle>

                <ion-menu-toggle autoHide={false}>
                  <ion-item href="/profile/piero">
                    <ion-icon slot="start" name="person" />
                    <ion-label>Profile</ion-label>
                  </ion-item>
                </ion-menu-toggle>
              </ion-list>
            </ion-content>
          </ion-menu>
          <ion-nav main />
        </ion-split-pane>
      </ion-app>
    );
  }
[...]

问题是<ion-nav main />给了我这个错误： 如果没有“主” ，则拆分窗格将无法正常工作

这是预期的行为

如何解决此问题？我没有如何正确使用拆分窗格中的ion菜单... 非常感谢

Answer 1

我在应用程序中使用了拆分窗格。您的实现有几个区别：

• ion-nav包装在具有ID属性的ion-content元素中
• ion-content和ion-split-pane[contentId]中引用了ion-menu[contentId]的ID

<ion-split-pane contentId="main-content">
  <ion-menu contentId="main-content">
    ...
  </ion-menu>
  <ion-content id="main-content">
    <ion-nav />
  </ion-content>
</ion-split-pane>