仅当路由器插座具有main属性时，Ionic v4菜单才起作用 [英] Ionic v4 menu only works when router-outlet has the main attribute

问题描述

我是第一次使用ionic v4构建应用程序，并且想要包含一个侧面菜单.

出于测试的原因，我首先将其放入app.component.html内，但不能让其滑入或滑入.

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

我不知道，为什么必须添加它才能使其真正起作用.

来源: 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>

解决方案

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

您可以通过查看

换句话说，如果您在ion-content上设置一个ID(而不是在ion-menu中的一个ID)，则不必设置main属性.您还可以在ion-router-outlet上设置ID，这与设置main属性相同.

I'm building an app with ionic v4 the first time and I want to include a side menu.

For testing reasons, I first put it inside of the app.component.html but I couldn't let it swipe out or in.

So I saw in the documentation, that they added the main attribute on the ion-router-outlet but as far as I read: it is not documented anywhere.

I don't know, why I'd have to add this, to make it actually work.

Source: https://ionicframework.com/docs/api/menu

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

So I came across this: https://ionicframework.com/docs/api/router-outlet#properties where basically the component gets explained BUT

this property isn't documented at all. I can't find it.

So to everyone: Do I need to add this and when: why?

My menu is pretty basic but I print it out below, so you guys can see what i've build.

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

解决方案

The main attribute is a custom attribute that has no function by it self. Other components may rely on it. ion-menu will attach classes to the component that matches the contentId OR if this is not set with the element that has the main attribute.

You can see this by looking at the 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');

To put it another way, you don't have to set the main attribute if you instead set an id on ion-content (just not the one inside ion-menu). You can also set the id on ion-router-outlet which will be the same thing as setting the main attribute.

这篇关于仅当路由器插座具有main属性时，Ionic v4菜单才起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！