如何在 Ionic/Angular 上使用不同的“模板”

Question

I've one ionic app with the menu on the left.

The app.component.html has the ion-router-outlet and all the menu:

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="overlay">
      <ion-content>
        <!-- Profile part -->
        <div class="ion-text-center">
          <div *ngIf="isLoggedIn$ | async" class="ion-text-center">
              <img
                ngxGravatar
                [email]="email$ | async"
                fallback="mp"
                size="80"
              />
            <ion-button (click)="doLogout()" color="danger">
              Logout
            </ion-button>
          </div>
          <div *ngIf="(isLoggedIn$ | async) === false">
            <ion-button (click)="doLogin()" color="success">Login</ion-button>

          </div>

        </div>
        <ion-list id="labels-list">
          <ion-list-header>Labels</ion-list-header>

          <ion-item *ngFor="let label of labels" lines="none">
            <ion-icon
              slot="start"
              ios="bookmark-outline"
              md="bookmark-sharp"
            ></ion-icon>
            <ion-label>{{ label }}</ion-label>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

I would like to know if it's possible to use a totally different template for some routes ? By example, if I've a sign in/sign up page, I don't want to have any menu.

The menu is one example, but I could imagine a lot of different scenarios, with totally different layouts.

How to do this? I could put some *ngIf in the base template, but I will make a lot of them.

Answer 1

You have a event on ion-router-outlet ie activate which will let you know which component is loaded in router outlet. You can use it like :-

HTML

<ion-router-outlet id="main-content" (activate) = "changeTemplate($event)"></ion-router-outlet>

TS:-

hideMenu=false;
changeTemplate(component: any) {
   if(component instanceof SigninPage) {
     this.hideMenu = true;
   }
}

Use flags like hideMenu in your template with ngIf.