CODEWITHSUNDEEP
angularionic-framework
Josh O'Connor
Josh O'Connor

Reputation: 4962

Ion-router-outlet causing issues with already existing router-outlet in Angular

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>

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.

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.

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?

Upvotes: 0

Views: 792

Answers (1)

Josh O&#39;Connor
Josh O&#39;Connor

Reputation: 4962

turns out you dont need ion-router-outlet

replace this:

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

All you have to do is add the main tag.

Upvotes: 1

Related Questions