Ionic高级导航 #

// guards/auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from '../services/auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(
    private auth: AuthService,
    private router: Router
  ) {}
  
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean {
    if (this.auth.isLoggedIn()) {
      return true;
    }
    
    // 保存目标URL
    this.auth.setRedirectUrl(state.url);
    
    // 跳转到登录页
    this.router.navigate(['/auth/login']);
    return false;
  }
}

// 路由配置
const routes: Routes = [
  {
    path: 'profile',
    loadChildren: () => import('./profile/profile.module').then(m => m.ProfilePageModule),
    canActivate: [AuthGuard]
  },
  {
    path: 'settings',
    loadChildren: () => import('./settings/settings.module').then(m => m.SettingsPageModule),
    canActivate: [AuthGuard]
  }
];

// guards/admin.guard.ts
import { Injectable } from '@angular/core';
import { CanActivateChild, Router } from '@angular/router';
import { AuthService } from '../services/auth.service';

@Injectable({
  providedIn: 'root'
})
export class AdminGuard implements CanActivateChild {
  constructor(
    private auth: AuthService,
    private router: Router
  ) {}
  
  canActivateChild(): boolean {
    if (this.auth.isAdmin()) {
      return true;
    }
    
    this.router.navigate(['/forbidden']);
    return false;
  }
}

// 路由配置
const routes: Routes = [
  {
    path: 'admin',
    canActivateChild: [AdminGuard],
    children: [
      { path: 'users', component: UsersPage },
      { path: 'settings', component: AdminSettingsPage }
    ]
  }
];

// guards/unsaved-changes.guard.ts
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { AlertController } from '@ionic/angular';

export interface CanDeactivateComponent {
  canDeactivate: () => boolean | Promise<boolean>;
}

@Injectable({
  providedIn: 'root'
})
export class UnsavedChangesGuard implements CanDeactivate<CanDeactivateComponent> {
  constructor(private alertCtrl: AlertController) {}
  
  async canDeactivate(
    component: CanDeactivateComponent
  ): Promise<boolean> {
    if (!component.canDeactivate || component.canDeactivate()) {
      return true;
    }
    
    const alert = await this.alertCtrl.create({
      header: '离开确认',
      message: '您有未保存的更改，确定要离开吗？',
      buttons: [
        {
          text: '取消',
          role: 'cancel',
          handler: () => false
        },
        {
          text: '确定离开',
          handler: () => true
        }
      ]
    });
    
    await alert.present();
    const { role } = await alert.onDidDismiss();
    return role !== 'cancel';
  }
}

// 组件实现
@Component({
  selector: 'app-edit',
  templateUrl: 'edit.page.html'
})
export class EditPage implements CanDeactivateComponent {
  hasUnsavedChanges = false;
  
  canDeactivate(): boolean {
    return !this.hasUnsavedChanges;
  }
}

// 路由配置
const routes: Routes = [
  {
    path: 'edit/:id',
    component: EditPage,
    canDeactivate: [UnsavedChangesGuard]
  }
];

// resolvers/user.resolver.ts
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { UserService } from '../services/user.service';

@Injectable({
  providedIn: 'root'
})
export class UserResolver implements Resolve<any> {
  constructor(
    private userService: UserService,
    private router: Router
  ) {}
  
  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any> {
    const id = route.paramMap.get('id');
    
    return this.userService.getUser(id).pipe(
      catchError(error => {
        this.router.navigate(['/not-found']);
        return of(null);
      })
    );
  }
}

// 路由配置
const routes: Routes = [
  {
    path: 'user/:id',
    component: UserPage,
    resolve: {
      user: UserResolver
    }
  }
];

// 组件获取数据
@Component({
  selector: 'app-user',
  templateUrl: 'user.page.html'
})
export class UserPage implements OnInit {
  user: any;
  
  constructor(private route: ActivatedRoute) {}
  
  ngOnInit() {
    this.user = this.route.snapshot.data['user'];
  }
}

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
  },
  {
    path: 'detail/:id',
    loadChildren: () => import('./detail/detail.module').then(m => m.DetailPageModule)
  },
  {
    path: 'settings',
    loadChildren: () => import('./settings/settings.module').then(m => m.SettingsPageModule)
  }
];

// 预加载所有模块
import { PreloadAllModules } from '@angular/router';

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

// 自定义预加载策略
import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    // 只预加载带有preload标志的路由
    if (route.data && route.data['preload']) {
      return load();
    }
    return of(null);
  }
}

// 路由配置
const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule),
    data: { preload: true }
  },
  {
    path: 'settings',
    loadChildren: () => import('./settings/settings.module').then(m => m.SettingsPageModule)
    // 不预加载
  }
];

src/app/
├── home/
│   ├── home.module.ts
│   ├── home.page.ts
│   ├── home.page.html
│   ├── home.page.scss
│   └── home-routing.module.ts
├── detail/
│   ├── detail.module.ts
│   ├── detail.page.ts
│   ├── detail.page.html
│   ├── detail.page.scss
│   └── detail-routing.module.ts
└── app-routing.module.ts

import { AnimationController } from '@ionic/angular';

// 自定义进入动画
const enterAnimation = (baseEl: HTMLElement, opts?: any) => {
  const animationCtrl = new AnimationController();
  
  const backdropAnimation = animationCtrl
    .create()
    .addElement(baseEl.querySelector('ion-backdrop')!)
    .fromTo('opacity', '0.01', '0.4');
  
  const wrapperAnimation = animationCtrl
    .create()
    .addElement(baseEl.querySelector('.modal-wrapper')!)
    .fromTo('transform', 'translateY(100%)', 'translateY(0)')
    .fromTo('opacity', '0', '1');
  
  return animationCtrl
    .create()
    .addElement(baseEl)
    .easing('ease-out')
    .duration(300)
    .addAnimation([backdropAnimation, wrapperAnimation]);
};

// 使用自定义动画
const modal = await this.modalCtrl.create({
  component: DetailModalComponent,
  enterAnimation,
  leaveAnimation: (baseEl) => enterAnimation(baseEl).direction('reverse')
});

import { NavController } from '@ionic/angular';

// 前进导航
this.navCtrl.navigateForward('/detail');

// 后退导航
this.navCtrl.navigateBack('/home');

// 根页面
this.navCtrl.navigateRoot('/login');

// 路由复用策略
import { Injectable } from '@angular/core';
import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private storedRoutes = new Map<string, DetachedRouteHandle>();
  
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return route.data['reuse'] === true;
  }
  
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this.storedRoutes.set(route.routeConfig?.path || '', handle);
  }
  
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return this.storedRoutes.has(route.routeConfig?.path || '');
  }
  
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return this.storedRoutes.get(route.routeConfig?.path || '') || null;
  }
  
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

// 路由配置
const routes: Routes = [
  {
    path: 'home',
    component: HomePage,
    data: { reuse: true }
  }
];

// app-routing.module.ts
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled',
      anchorScrolling: 'enabled'
    })
  ]
})
export class AppRoutingModule {}

import { Component } from '@angular/core';
import { Router, NavigationError } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(private router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationError) {
        console.error('导航错误:', event.error);
        this.router.navigate(['/error']);
      }
    });
  }
}

// 父路由
const routes: Routes = [
  {
    path: 'settings',
    component: SettingsPage,
    children: [
      {
        path: '',
        redirectTo: 'profile',
        pathMatch: 'full'
      },
      {
        path: 'profile',
        component: ProfileSettingsComponent
      },
      {
        path: 'security',
        component: SecuritySettingsComponent
      }
    ]
  }
];

<!-- settings.page.html -->
<ion-header>
  <ion-toolbar>
    <ion-title>设置</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-split-pane>
    <ion-menu>
      <ion-list>
        <ion-item routerLink="profile">个人资料</ion-item>
        <ion-item routerLink="security">安全设置</ion-item>
      </ion-list>
    </ion-menu>
    
    <ion-router-outlet></ion-router-outlet>
  </ion-split-pane>
</ion-content>

const routes: Routes = [
  {
    path: 'home',
    component: HomePage,
    children: [
      {
        path: 'detail/:id',
        component: DetailComponent,
        outlet: 'sidebar'
      }
    ]
  }
];

<ion-content>
  <ion-router-outlet></ion-router-outlet>
  <ion-router-outlet name="sidebar"></ion-router-outlet>
</ion-content>

// 动态加载路由
import { Injector } from '@angular/core';

export class DynamicRouteService {
  constructor(
    private router: Router,
    private injector: Injector
  ) {}
  
  addRoute(path: string, component: any) {
    const route = {
      path,
      component
    };
    
    this.router.config.push(route);
    this.router.resetConfig(this.router.config);
  }
}

推荐结构:
├── /auth
│   ├── /auth/login
│   └── /auth/register
├── /tabs
│   ├── /tabs/home
│   ├── /tabs/search
│   └── /tabs/profile
├── /detail/:id
└── /settings

推荐：
- 认证守卫：CanActivate
- 权限守卫：CanActivateChild
- 表单守卫：CanDeactivate
- 数据预加载：Resolve

推荐：
- 使用懒加载
- 合理使用预加载
- 路由复用
- 错误处理