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

Question

我有一個帶有左側菜單的離子應用程序。

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，但我會制作很多。

Answer 1

您在 ion-router-outlet 上有一個事件，即 activate ，它會讓您知道路由器出口中加載了哪個組件。 你可以像這樣使用它：-

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 這樣的標志。