angular - 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将类附加到与 contentId 匹配的组件上或者，如果这不是使用具有 main 的元素设置的属性。

您可以通过查看 source code 看到这一点。 :

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属性，如果您改为在 ion-content 上设置 id (只是不是里面的那个 ion-menu )。您还可以在 ion-router-outlet 上设置 ID这与设置 main 相同属性。