如何在IonicAngular中使用本地路由

我有一個應用程式，我需要做一些本地路由。

我已附加檔案結構作為影像

我想要做的是當我單擊管理帳戶中的按鈕時，它會導航到 accountdetailed。

目前我在 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]);

  }
}

manageaccount-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 而不是主應用程式路由

uj5u.com熱心網友回復：

將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

在 app-routing 中，洗掉'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]);

標籤：有角的 打字稿 离子框架 角度路由

上一篇：如何在Go中引數化動態查詢

下一篇：離子“awaitsignInWithEmailAndPassword()”在沒有livereload的iOS模擬器/設備上不起作用