离子路由器插座导致Angular中已存在的路由器插座出现问题 [英] Ion-router-outlet causing issues with already existing router-outlet in Angular

问题描述

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

In my app, in manager.component.html, I have the following, which has a router-outlet, and my app works wonderfully:

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

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

I decided to add a ion-menu as a slider:

<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> 的内容无法显示.

This seems to work, 90% of the time. Sometimes on initialization, there will be a routing problem and cause what was supposed to be shown with <router-outlet> to not be shown.

我在注释掉</ion-router-outlet main></ion-router-outlet> 时发现， router-outlet 可以正常工作.好像您不能同时拥有router缝机出口和离子-缝机出口.

I discovered when I comment out <ion-router-outlet main></ion-router-outlet>, router-outlet works as expected. It seems as if you can't have router-outlet and ion-router-outlet simultaneously.

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

What is the best solution to having both ion-router-outlet (needed for ion-menu) AND router-outlet in the same component? is there a way to use ion-menu without ion-router-outlet?

推荐答案

原来您不需要ion-router-outlet

turns out you dont need ion-router-outlet

替换此:

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

带有以下内容(无论您要将菜单添加到哪个容器):

with the following (whatever your container you want to add the menu to):

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

您要做的就是添加 main 标记.

All you have to do is add the main tag.

这篇关于离子路由器插座导致Angular中已存在的路由器插座出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！