Ionic v4 菜单仅在 router-outlet 具有 main 属性时有效

Question

我是第一次用 ionic v4 构建一个应用程序，我想包含一个侧边菜单。

出于测试原因，我首先将它放在 app.component.html 中，但我不能让它滑出或滑入。

所以我在文档中看到，他们在main上添加了属性，ion-router-outlet但据我所知：它没有记录在任何地方。

我不知道，为什么我必须添加这个，才能让它真正起作用。

来源：https : //ionicframework.com/docs/api/menu

<ion-router-outlet main></ion-router-outlet>

所以我遇到了这个：https : //ionicframework.com/docs/api/router-outlet#properties基本上组件得到解释但是

这个属性根本没有记录。我找不到。

所以对每个人：我是否需要添加这个以及何时：为什么？

我的菜单很基本，但我把它打印在下面，所以你们可以看到我做了什么。

<ion-app>
  <ion-menu menuId="sideMenu" swipeGesture="true">
    <ion-header>
      <ion-toolbar>
        <ion-button slot="start">
          <img alt="logo" src="../assets/logo.svg">
        </ion-button>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Attack</ion-item>
        <ion-item>Defence</ion-item>
        <ion-item>Feedback</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet main></ion-router-outlet>
</ion-app>

Answer 1

该main属性是自定义属性，其本身没有任何功能。其他组件可能依赖它。如果未使用具有该属性ion-menu的元素设置类，则会将类附加到与 OR 匹配的组件。contentIdmain

你可以通过查看源代码看到这一点：

const content = this.contentId !== undefined
  ? this.doc.getElementById(this.contentId)
  : parent && parent.querySelector && parent.querySelector('[main]');

if (!content || !content.tagName) {
  // requires content element
  console.error('Menu: must have a "content" element to listen for drag events on.');
  return;
}
this.contentEl = content as HTMLElement;

// add menu's content classes
content.classList.add('menu-content');

换句话说，main如果您设置了一个 id on ion-content（只是不是里面的 id ion-menu），则不必设置该属性。您还可以设置 id ion-router-outlet，其与设置属性相同main。