如何在Ionic / Angular上使用其他“模板”

问题描述

我有一个离子应用程序，左侧菜单。

app.component.html具有ion-router-outlet和所有菜单：

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

我想知道是否可以对某些路线使用完全不同的模板？例如，如果我有一个登录/注册页面，那么我就不需要任何菜单。

菜单是一个示例，但是我可以想象很多不同的情况，布局完全不同。

如何执行此操作？我可以在基本模板中放一些* ngIf，但是我会做很多。

解决方法

您在ion-router插座上有一个事件，即激活，它将使您知道在路由器插座中装入了哪个组件。您可以像这样使用它：-

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

在带有ngIf的模板中使用诸如hideMenu之类的标志。