离子路由器插座导致 Angular 中现有路由器插座出现问题

debugcn 发表于 Dev

乔什·奥康纳

在我的应用程序中，在 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？

乔什·奥康纳

原来你不需要 ion-router-outlet

替换这个：

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

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。