离子角度侧面菜单

Question

我的侧菜单内容一直存在问题，每当插入 contentId="main-content" 时，导航链接的内容（主页）都不会加载/可见。但是当我删除它时，菜单按钮将消失，但主页内容可见。

app.component.html 

<ion-app>
  <!-- Side Menu -->
  <ion-menu contentId="main-content" type="overlay" class="custom-menu">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Aqua</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <!-- User Info Section with styling -->
      <div class="user-info">
        <ion-avatar class="avatar">
          <img src="../assets/CJ2X2.jpg" alt="User Avatar" />
        </ion-avatar>
        <h2 class="user-name">Charles Jhaztine <br> Alisasis</h2>
        <p class="user-number">2210394112233</p>
      </div>

      <!-- Menu Items with custom styles -->
      <ion-list lines="none">
        <ion-item routerLink="/history" routerDirection="root" class="menu-item">
          <ion-icon name="book-outline" slot="start"></ion-icon>
          <ion-label>Company History</ion-label>
        </ion-item>
        <ion-item routerLink="/products" routerDirection="root" class="menu-item">
          <ion-icon name="pricetags-outline" slot="start"></ion-icon>
          <ion-label>About Our Products</ion-label>
        </ion-item>
        <ion-item routerLink="/cart" routerDirection="root" class="menu-item">
          <ion-icon name="cart-outline" slot="start"></ion-icon>
          <ion-label>Cart</ion-label>
        </ion-item>
        <ion-item routerLink="/about" routerDirection="root" class="menu-item">
          <ion-icon name="information-circle-outline" slot="start"></ion-icon>
          <ion-label>About the App</ion-label>
        </ion-item>
        <ion-item routerLink="/developers" routerDirection="root" class="menu-item">
          <ion-icon name="people-outline" slot="start"></ion-icon>
          <ion-label>Developers</ion-label>
        </ion-item>
        <ion-item routerLink="/contact" routerDirection="root" class="menu-item">
          <ion-icon name="mail-outline" slot="start"></ion-icon>
          <ion-label>Contact Us</ion-label>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <!-- Main Content -->
  <div id="main-content">
    <ion-router-outlet></ion-router-outlet>
  </div>
</ion-app>


app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'homepage',
    pathMatch: 'full',
  },
  {
    path: 'folder/:id',
    loadChildren: () =>
      import('./folder/folder.module').then((m) => m.FolderPageModule),
  },
  {
    path: 'splashscreen',
    loadChildren: () =>
      import('./splashscreen/splashscreen.module').then(
        (m) => m.SplashscreenPageModule
      ),
  },
  {
    path: 'authentication',
    loadChildren: () =>
      import('./authentication/authentication.module').then(
        (m) => m.AuthenticationPageModule
      ),
  },
  {
    path: 'login',
    loadChildren: () =>
      import('./login/login.module').then((m) => m.LoginPageModule),
  },
  {
    path: 'register',
    loadChildren: () =>
      import('./register/register.module').then((m) => m.RegisterPageModule),
  },
  {
    path: 'history',
    loadChildren: () =>
      import('./history/history.module').then((m) => m.HistoryPageModule),
  },
  {
    path: 'products',
    loadChildren: () =>
      import('./products/products.module').then((m) => m.ProductsPageModule),
  },
  {
    path: 'cart',
    loadChildren: () =>
      import('./cart/cart.module').then((m) => m.CartPageModule),
  },
  {
    path: 'about',
    loadChildren: () =>
      import('./about/about.module').then((m) => m.AboutPageModule),
  },
  {
    path: 'developers',
    loadChildren: () =>
      import('./developers/developers.module').then(
        (m) => m.DevelopersPageModule
      ),
  },
  {
    path: 'contact',
    loadChildren: () =>
      import('./contact/contact.module').then((m) => m.ContactPageModule),
  },
  {
    path: 'homepage',
    loadChildren: () =>
      import('./homepage/homepage.module').then((m) => m.HomepagePageModule),
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}


homepage.page.html
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>Aqua</ion-title>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div class="ad-container">
    <img src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/modern-minimal-water-bottle-advertising-design-template-4d939eeff0b5740b0a90af87054b96d6_screen.jpg?ts=1645359366" alt="">
  </div>

  <div class="categories-container p-3">
    <h1 class="m-0">Categories</h1>

    <div class="scroll-container my-2">
      <ion-button class="category-button">Mineral</ion-button>
      <ion-button class="category-button">Spring</ion-button>
      <ion-button class="category-button">Purified</ion-button>
      <ion-button class="category-button">Distilled</ion-button>
      <ion-button class="category-button">Sparkling</ion-button>
      <ion-button class="category-button">Artesian</ion-button>
    </div>
    
    <div class="products-container">
      <div class="product">
        <img src="https://d2t3trus7wwxyy.cloudfront.net/catalog/product/1/0/10051343---crystal-clear-purified-drinking-water-1l.jpg" alt="">
        <div class="d-flex px-1 justify-content-start mt-3">
          <span>Crystal Clear</span>
        </div>
        <div class="d-flex px-1 justify-content-between">
          <span>500ml</span>
          <span>₱25</span>
        </div>
        <button class="select-size-btn mt-3" id="crystal-clear">Select Size</button>
        <ion-modal #modal1 trigger="crystal-clear" class="half-height-modal">
          <ng-template>
            <ion-header>
              <ion-toolbar>
                <ion-title size="medium" class="modal-title">AQUA CART</ion-title>
              </ion-toolbar>
            </ion-header>
            <ion-content class="ion-padding">
              <h1 class="m-0">Select Size</h1>
              <ion-list class="mt-1">
                <ion-item>
                  <ion-select aria-label="Bottled Size" value="500mL">
                    <ion-select-option value="500mL">500mL - ₱25</ion-select-option>
                    <ion-select-option value="1L">1 Liter - ₱45</ion-select-option>
                    <ion-select-option value="1.5L">1.5 Liter - ₱70</ion-select-option>
                  </ion-select>
                </ion-item>
              </ion-list>

              <div class="buttons-container mt-4 d-flex justify-content-between">
                <button class="cancel" (click)="cancel(modal1)">Cancel</button>
                <button class="add" (click)="confirm(modal1)">Add to Cart</button>
              </div>
            </ion-content>
          </ng-template>
        </ion-modal>
      </div>

      <div class="product">
        <img src="https://ip.prod.freshop.retail.ncrcloud.com/resize?url=https://images.freshop.ncrcloud.com/1564405684702543777/b2524de8324fddf5b7b874b7b3af741d_large.png&width=512&type=webp&quality=90" alt="">
        <div class="d-flex px-1 justify-content-start mt-3">
          <span>Wilkins</span>
        </div>
        <div class="d-flex px-1 justify-content-between">
          <span>500ml</span>
          <span>₱25</span>
        </div>
        <button class="select-size-btn mt-3" id="wilkins">Select Size</button>
        <ion-modal #modal2 trigger="wilkins" class="half-height-modal">
          <ng-template>
            <ion-header>
              <ion-toolbar>
                <ion-title size="medium" class="modal-title">AQUA CART</ion-title>
              </ion-toolbar>
            </ion-header>
            <ion-content class="ion-padding">
              <h1 class="m-0">Select Size</h1>
              <ion-list class="mt-1">
                <ion-item>
                  <ion-select aria-label="Bottled Size" value="500mL">
                    <ion-select-option value="500mL">500mL - ₱25</ion-select-option>
                    <ion-select-option value="1L">1 Liter - ₱45</ion-select-option>
                    <ion-select-option value="1.5L">1.5 Liter - ₱70</ion-select-option>
                  </ion-select>
                </ion-item>
              </ion-list>

              <div class="buttons-container mt-4 d-flex justify-content-between">
                <button class="cancel" (click)="cancel(modal2)">Cancel</button>
                <button class="add" (click)="confirm(modal2)">Add to Cart</button>
              </div>
            </ion-content>
          </ng-template>
        </ion-modal>
      </div>

      <div class="product">
        <img src="https://naturespring.sgp1.digitaloceanspaces.com/cms_images/35x2JrYLvCMnhrZ9yFM0M2yS0vLjMgRz5UtDEIUt.jpg" alt="">
        <div class="d-flex px-1 justify-content-start mt-3">
          <span>Nature's Spring</span>
        </div>
        <div class="d-flex px-1 justify-content-between">
          <span>500ml</span>
          <span>₱25</span>
        </div>
        <button class="select-size-btn mt-3" id="nspring">Select Size</button>
        <ion-modal #modal3 trigger="nspring" class="half-height-modal">
          <ng-template>
            <ion-header>
              <ion-toolbar>
                <ion-title size="medium" class="modal-title">AQUA CART</ion-title>
              </ion-toolbar>
            </ion-header>
            <ion-content class="ion-padding">
              <h1 class="m-0">Select Size</h1>
              <ion-list class="mt-1">
                <ion-item>
                  <ion-select aria-label="Bottled Size" value="500mL">
                    <ion-select-option value="500mL">500mL - ₱25</ion-select-option>
                    <ion-select-option value="1L">1 Liter - ₱45</ion-select-option>
                    <ion-select-option value="1.5L">1.5 Liter - ₱70</ion-select-option>
                  </ion-select>
                </ion-item>
              </ion-list>

              <div class="buttons-container mt-4 d-flex justify-content-between">
                <button class="cancel" (click)="cancel(modal3)">Cancel</button>
                <button class="add" (click)="confirm(modal3)">Add to Cart</button>
              </div>
            </ion-content>
          </ng-template>
        </ion-modal>
      </div>

      <div class="product">
        <img src="https://media.pickaroo.com/media/thumb/variant_photos/2021/3/2/PUuzEKEo5piRp49Bttt74v_watermark_400.jpg" alt="">
        <div class="d-flex px-1 justify-content-start mt-3">
          <span>Absolute</span>
        </div>
        <div class="d-flex px-1 justify-content-between">
          <span>500ml</span>
          <span>₱25</span>
        </div>
        <button class="select-size-btn mt-3" id="absolute">Select Size</button>
        <ion-modal #modal4 trigger="absolute" class="half-height-modal">
          <ng-template>
            <ion-header>
              <ion-toolbar>
                <ion-title size="medium" class="modal-title">AQUA CART</ion-title>
              </ion-toolbar>
            </ion-header>
            <ion-content class="ion-padding">
              <h1 class="m-0">Select Size</h1>
              <ion-list class="mt-1">
                <ion-item>
                  <ion-select aria-label="Bottled Size" value="500mL">
                    <ion-select-option value="500mL">500mL - ₱25</ion-select-option>
                    <ion-select-option value="1L">1 Liter - ₱45</ion-select-option>
                    <ion-select-option value="1.5L">1.5 Liter - ₱70</ion-select-option>
                  </ion-select>
                </ion-item>
              </ion-list>

              <div class="buttons-container mt-4 d-flex justify-content-between">
                <button class="cancel" (click)="cancel(modal4)">Cancel</button>
                <button class="add" (click)="confirm(modal4)">Add to Cart</button>
              </div>
            </ion-content>
          </ng-template>
        </ion-modal>
      </div>

      <div class="product">
        <img src="https://shopustore.net/cdn/shop/products/SUMMIT350ML.jpg?v=1648094670" alt="">
        <div class="d-flex px-1 justify-content-start mt-3">
          <span>Summit</span>
        </div>
        <div class="d-flex px-1 justify-content-between">
          <span>500ml</span>
          <span>₱25</span>
        </div>
        <button class="select-size-btn mt-3" id="summit">Select Size</button>
        <ion-modal #modal5 trigger="summit" class="half-height-modal">
          <ng-template>
            <ion-header>
              <ion-toolbar>
                <ion-title size="medium" class="modal-title">AQUA CART</ion-title>
              </ion-toolbar>
            </ion-header>
            <ion-content class="ion-padding">
              <h1 class="m-0">Select Size</h1>
              <ion-list class="mt-1">
                <ion-item>
                  <ion-select aria-label="Bottled Size" value="500mL">
                    <ion-select-option value="500mL">500mL - ₱25</ion-select-option>
                    <ion-select-option value="1L">1 Liter - ₱45</ion-select-option>
                    <ion-select-option value="1.5L">1.5 Liter - ₱70</ion-select-option>
                  </ion-select>
                </ion-item>
              </ion-list>

              <div class="buttons-container mt-4 d-flex justify-content-between">
                <button class="cancel" (click)="cancel(modal5)">Cancel</button>
                <button class="add" (click)="confirm(modal5)">Add to Cart</button>
              </div>
            </ion-content>
          </ng-template>
        </ion-modal>
      </div>

      <div class="product">
        <img src="https://s3.ap-southeast-1.amazonaws.com/control-center.builtamart.com/public/products/5582-002-28-2023-170227-177.jpg?rand=0.6076865970321672" alt="">
        <div class="d-flex px-1 justify-content-start mt-3">
          <span>Evian</span>
        </div>
        <div class="d-flex px-1 justify-content-between">
          <span>500ml</span>
          <span>₱25</span>
        </div>
        <button class="select-size-btn mt-3" id="evian">Select Size</button>
        <ion-modal #modal6 trigger="evian" class="half-height-modal">
          <ng-template>
            <ion-header>
              <ion-toolbar>
                <ion-title size="medium" class="modal-title">AQUA CART</ion-title>
              </ion-toolbar>
            </ion-header>
            <ion-content class="ion-padding">
              <h1 class="m-0">Select Size</h1>
              <ion-list class="mt-1">
                <ion-item>
                  <ion-select aria-label="Bottled Size" value="500mL">
                    <ion-select-option value="500mL">500mL - ₱25</ion-select-option>
                    <ion-select-option value="1L">1 Liter - ₱45</ion-select-option>
                    <ion-select-option value="1.5L">1.5 Liter - ₱70</ion-select-option>
                  </ion-select>
                </ion-item>
              </ion-list>

              <div class="buttons-container mt-4 d-flex justify-content-between">
                <button class="cancel" (click)="cancel(modal6)">Cancel</button>
                <button class="add" (click)="confirm(modal6)">Add to Cart</button>
              </div>
            </ion-content>
          </ng-template>
        </ion-modal>
      </div>
      
    </div>
  </div>
</ion-content>

我尝试过重新路由，但它不起作用，我认为 Ion-router-outlet 没有动态变化。

Answer 1

问题是，当设置

contentId

时，主要内容（

<ion-router-outlet>

）被隐藏，这导致主页内容不可见。

要解决此问题，您可以从

contentId

元素中删除

<ion-menu>

属性。这将使主要内容正确显示。

<ion-app>
  <!-- Side Menu -->
  <ion-menu type="overlay" class="custom-menu">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Aqua</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <!-- User Info Section with styling -->
      <div class="user-info">
        <ion-avatar class="avatar">
          <img src="../assets/CJ2X2.jpg" alt="User Avatar" />
        </ion-avatar>
        <h2 class="user-name">Charles Jhaztine <br> Alisasis</h2>
        <p class="user-number">2210394112233</p>
      </div>

      <!-- Menu Items with custom styles -->
      <ion-list lines="none">
        <!-- Menu items here -->
      </ion-list>
    </ion-content>
  </ion-menu>

  <!-- Main Content -->
  <ion-router-outlet></ion-router-outlet>
</ion-app>