如何使用 Ionic 的本地路由 Angular

Question

我有一个应用程序，我需要做一些本地路由。

我已将文件结构作为图片附上

我想要做的是，当我点击管理帐户中的一个按钮时，它会导航到帐户详细信息。

目前我在 app-routing.module.ts 中有这样的路由：

const routes: Routes = [
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule),
    canLoad: [AutoLoginGuard] // Check if we should show the introduction or forward to inside
  },
  {
    path: 'nav',
    loadChildren: () => import('./sidenav/sidenav.module').then(m => m.SidenavPageModule),
    canLoad: [AuthGuard] // Secure all child pages
  },
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: 'accountdetailed/:id',
    loadChildren: () => import('./manageaccount/accountdetailed/accountdetailed.module').then( m => m.AccountdetailedPageModule)
  },
  {
    path: 'manageaccount',
    loadChildren: () => import('./manageaccount/manageaccount.module').then( m => m.ManageaccountPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

这是我的管理帐户代码：

html:

<ion-list id="settingList" class="ion-no-padding">
    <ion-item color="dark" id="yourDetailsBtn"  (click)="showDetail('details', 'yourDetailsBtn')" button>
      <ion-label class="white-text">Your Details</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

manageaccount.page.ts:

import {Component, OnInit, ViewChild} from '@angular/core';
import {IonAccordionGroup, NavController} from '@ionic/angular';

@Component({
  selector: 'app-manageaccount',
  templateUrl: './manageaccount.page.html',
  styleUrls: ['./manageaccount.page.scss'],
})
export class ManageaccountPage implements OnInit {
  @ViewChild(IonAccordionGroup, {static: true}) accordionGroup: IonAccordionGroup;

  constructor(
    private navCtrl: NavController
  ) {}

  ngOnInit() {
  }

  logAccordionValue() {
    console.log(this.accordionGroup.value);
  }

  closeAccordion() {
    this.accordionGroup.value = undefined;
  }

  showDetail(type, id) {

    alert(id);
    console.log(id);

    this.navCtrl.navigateForward(['accountdetailed', id]);

  }
}

管理账户-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ManageaccountPage } from './manageaccount.page';

const routes: Routes = [
  {
    path: '',
    component: ManageaccountPage
  },
  {
    path: 'accountdetailed/:id',
    loadChildren: () => import('./accountdetailed/accountdetailed.module').then( m => m.AccountdetailedPageModule)
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class ManageaccountPageRoutingModule {}

因此，当我点击“您的详细信息”按钮并调用 showDetail() 方法时，我如何让它使用 manageaccount-routing.module.ts 而不是主应用程序路由

Answer 1

将 accountdetailed/:id 路由从 app-routing 移动到 manageaccount-routing，并将它们设置为具有相同的前缀：

www.angulat-app.com/manageaccount - loads the manage account 
www.angulat-app.com/manageaccount/accountdetailed/id - loads the account details

在应用程序路由中，删除 'accountdetailed/:id' 路径：

const routes: Routes = [
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule),
    canLoad: [AutoLoginGuard] // Check if we should show the introduction or forward to inside
  },
  {
    path: 'nav',
    loadChildren: () => import('./sidenav/sidenav.module').then(m => m.SidenavPageModule),
    canLoad: [AuthGuard] // Secure all child pages
  },
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: 'manageaccount',
    loadChildren: () => import('./manageaccount/manageaccount.module').then( m => m.ManageaccountPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

然后在 manageaccount-routing.module.ts:

中区分你的路由

const routes: Routes = [
  {
    path: '', // empty route (i.e. /manageaccount/ would load only manageaccount
    component: ManageaccountPage
  },
  {
    path: 'accountdetailed/:id', // i.e. /manageaccount/accountdetailed/:id
    loadChildren: () => import('./accountdetailed/accountdetailed.module').then( m => m.AccountdetailedPageModule)
  },
  
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

当然，不要忘记在 showDetail(type, id) 函数中更改路由器导航：

this.navCtrl.navigateForward(['manageaccount/accountdetailed', id]);

如何使用 Ionic 的本地路由 Angular

How to use local routing with Ionic Angular

typescript

angular-routing

ionic-framework

angular