如何使 Ionic 组件在组件之间持久存在

Question

我正在使用 Ionic 构建一个包含几个组件的程序。启动时，程序会打开一个登录组件，然后当用户登录时，它会重定向到我的主页组件。

我有一个“导航”组件，它是一个重定向到多个组件的导航栏，但是当我选择要导航到的页面时，导航栏就会消失。如何使其跨组件持久存在？

找到附加的我的app.routes.ts、我的navigation.page.html和我的navigation.page.ts。

navigation.page.html：

<ion-content fullscreen="true">
  <ion-header translucent="true">
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button (click)="signOut()">
          <ion-icon name="power-outline"></ion-icon>
          <ion-label>Sign Out</ion-label>
        </ion-button>
      </ion-buttons>
      <div class="ion-text-center">
        <ion-title>Finance Manager</ion-title>
      </div>
      <ion-buttons slot="end">
        <ion-button href="/profile">
          <ion-icon name="person-circle-outline"></ion-icon>
          <ion-label>Account</ion-label>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>

  <ion-segment scrollable value="1">
    <ion-segment-button routerLink="/home" value="1">
      <ion-label>Home</ion-label>
    </ion-segment-button>
    <ion-segment-button routerLink="/transactions" value="2">
      <ion-label>Transactions</ion-label>
    </ion-segment-button>
    <ion-segment-button routerLink="/budgeting" value="3">
      <ion-label>Budgeting</ion-label>
    </ion-segment-button>
    <ion-segment-button routerLink="/reports" value="4">
      <ion-label>Reports</ion-label>
    </ion-segment-button>
  </ion-segment>

</ion-content>

navigation.page.ts：

import { Component, inject } from '@angular/core';
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonButton,
  IonIcon,
  IonTabs,
  IonTabBar,
  IonTabButton,
  IonLabel,
  IonSegment,
  IonSegmentButton,
  IonButtons,
} from '@ionic/angular/standalone';
import { Router, RouterLink, RouterOutlet } from '@angular/router';
import { powerOutline, personCircleOutline } from 'ionicons/icons';
import { addIcons } from 'ionicons';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-navigation',
  templateUrl: 'navigation.page.html',
  styleUrls: ['navigation.page.scss'],
  standalone: true,
  imports: [
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonButton,
    IonIcon,
    IonTabs,
    IonTabBar,
    IonTabButton,
    IonLabel,
    IonSegment,
    IonSegmentButton,
    IonButtons,
    RouterLink,
    RouterOutlet,
    RouterModule
  ],
})
export class NavigationPage {
  private router = inject(Router);

  constructor() {
    addIcons({
      powerOutline,
      personCircleOutline,
    });
  }

  async signOut() {
    this.router.navigateByUrl('/login', { replaceUrl: true });
  }
}

最后，app.routes.ts：

import { Routes } from '@angular/router';


export const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full',
  },
  {
    path: 'login',
    loadComponent: () => import('./login/login.page').then((m) => m.LoginPage),
  },
  {
  path: 'navigation',
    loadComponent: () => import('./navigation/navigation.page').then((m) => m.NavigationPage),
  },
  {
    path: 'home',
    loadComponent: () => import('./home/home.page').then((m) => m.HomePage),
  },
  {
    path: 'transactions',
    loadComponent: () =>
      import('./transactions/transactions.page').then((m) => m.TransactionsPage),
  },
  {
    path: 'budgeting',
    loadComponent: () =>
      import('./budgeting/budgeting.page').then((m) => m.BudgetingPage),
  },
  {
    path: 'reports',
    loadComponent: () =>
      import('./reports/reports.page').then((m) => m.ReportsPage),
  },
  {
    path: 'settings',
    loadComponent: () =>
      import('./settings/settings.page').then((m) => m.SettingsPage),
  },
];


/*{ path: 'products', component: ProductListComponent },
  {
    path: 'products/:id',
    canActivate: [ProductDetailGuard],
    component: ProductDetailComponent
  }*/

谢谢

Answer 1

您的导航组件不会在您的应用程序路由中重复使用。为了让组件跨组件持久化，你需要重构你的路由和布局：

重组您的路线

import { Routes } from '@angular/router';

export const routes: Routes = [
 {
   ..
 },
 {
   path: '',
   component: NavigationPage, // This is the layout component that includes the navigation bar
   children: [
     {
       path: 'home',
       loadComponent: () => import('./home/home.page').then((m) => m.HomePage),
     },
     {
       path: 'transactions',
       loadComponent: () =>
       import('./transactions/transactions.page').then((m) => m.TransactionsPage),
     },
     {
       path: 'budgeting',
       loadComponent: () =>
       import('./budgeting/budgeting.page').then((m) => m.BudgetingPage),
     },
     {
       path: 'reports',
       loadComponent: () =>
       import('./reports/reports.page').then((m) => m.ReportsPage),
     },
  ],
 },
];

更新您的navigation.page.html

<ion-content fullscreen="true">
   <ion-header translucent="true"></ion-header>

   <ion-segment></ion-segment>

   <!-- This is where child components will be rendered -->
   <router-outlet></router-outlet>
</ion-content>