Question

在我的应用程序中，在manager.component.html中，我具有以下内容，其中包含路由器出口，并且我的应用程序运行出色：

<div
  class="cu-manager2__router-outlet"
  [class.manager-space-bar]="!(hideSpacebar$ | async)"
>
  <cu2-spaces-bar
  ></cu2-spaces-bar>
  <router-outlet [hidden]="!(project$ | async)"></router-outlet>
</div>

我决定添加一个离子菜单作为滑块：

<ion-menu 
  side="start" 
  menuId="sliding-menu" 
  class="slider-drawer" 
  type="overlay"
  (ionWillOpen)="menuOpened()"
  (ionDidOpen)="menuOpened()"
  (ionDidClose)="menuClosed()"
  >

    <ion-slides #ionSlider 
      pager="true" 
      class="ion-slides-container" 
      (ionSlideDidChange)="sliderDidChange()"
    >
      <ion-slide class="ion-slides-spaces-container">
        <div class="spaces-inner-container">
        </div>
      </ion-slide>

      <ion-slide class="ion-slides-folders-container">
          <div class = "folders-inner-container">
          </div>
      </ion-slide>
    </ion-slides> 
</ion-menu>
<ion-router-outlet main></ion-router-outlet>

这似乎有效，有90％的时间。有时在初始化时，会出现路由问题，并导致本应显示为<router-outlet>的内容无法显示。

我在评论<ion-router-outlet main></ion-router-outlet>时发现router-outlet可以正常工作。好像您不能同时拥有路由器出口和离子路由器出口。

在同一组件中同时具有离子路由器出口（离子菜单所需）和路由器出口的最佳解决方案是什么？有没有办法使用ion-menu而不使用ion-router-outlet？

Answer 1

原来您不需要离子路由器出口

替换此：

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

带有以下内容（无论您要将菜单添加到哪个容器）：

<div main class="main-container-padding"></div>

您要做的就是添加main标签。

离子路由器插座导致已存在的路由器插座出现问题[离子] [角度]

1 个答案: