模板： <ion-pane-split> 内的 <ion-nav> 不能正常工作答案

【问题标题】：Stencil: <ion-nav> inside <ion-pane-split> don't work properly模板： <ion-pane-split> 内的 <ion-nav> 不能正常工作
【发布时间】：2019-11-12 04:59:41
【问题描述】：

这些是我的模板和离子版本

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

我正在尝试在<ion-split-pane> 中使用<ion-menu>，就像在离子应用程序中一样，这是我的代码（这是此代码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 /> 给了我这个错误：如果没有 "main"，拆分窗格将无法正常工作

这是预期的行为

如何解决这个问题？我不明白如何正确使用拆分窗格内的离子菜单... 非常感谢

【问题讨论】：

标签： ionic-framework menu nav stenciljs

【解决方案1】：

我在应用程序中使用了拆分窗格。您的实现有几个不同之处：

ion-nav 包含在带有 ID 属性的 ion-content 元素中
ion-contents ID 在ion-split-pane[contentId] 和ion-menu[contentId] 中引用

<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>

【讨论】：