离子路由器出口导致 Angular 中已经存在的路由器出口出现问题答案

【问题标题】：Ion-router-outlet causing issues with already existing router-outlet in Angular离子路由器出口导致 Angular 中已经存在的路由器出口出现问题
【发布时间】：2019-07-30 22:18:56
【问题描述】：

在我的应用程序 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-router-outlet（ion-menu 需要）和 router-outlet 的最佳解决方案是什么？有没有办法在没有ion-router-outlet 的情况下使用ion-menu？

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

原来你不需要离子路由器插座

替换这个：

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

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

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

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

【讨论】：