IONIC 4 - 路由导航

Posted 2023-02-26

【中文标题】IONIC 4 - 路由导航

【英文标题】：IONIC 4 - Routing Navigation

【发布时间】：2019-11-21 09:17:56

【问题描述】：

大家早上好，

我是 Ionic 的初学者，但遇到了一些路由问题。 在显示我的标题时，我遇到了一些困难，无法在我的子文件夹中导航。

有人可以帮我澄清我错在哪里。

我的标签页也有一个导航到仪表板的路由，它正在工作。但是当我在我的仪表板页面中重用代码导航到[条形码-报告-交易-帮助]时，它不起作用

import  NgModule  from '@angular/core';
import  RouterModule, Routes  from '@angular/router';
import  DashboardPage  from './dashboard.page';

const routes: Routes = [


  path: 'dashboard',
    component: DashboardPage,
    children: [
    path: 'barcode', loadChildren: 'barcode/barcode.module#BarcodePageModule' ,
    path: 'transaction',  loadChildren: 'transaction/transaction.module#TransactionPageModule' ,
    path: 'report',  loadChildren: 'report/report.module#ReportPageModule'  ,
    path: 'help', loadChildren: 'help/help.module#HelpPageModule' ,  
    ]
  ,
   path: '', redirectTo: '/tabs/dashboard', pathMatch: 'full' 
];

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

<!-- START CONTENT -->
<ion-content class="dashboardContent">
    <ion-grid>
      <ion-row >
        <ion-col>
          <div><ion-button routerLink="/barcode"  class="dashboardBtn" color="primary">Barcode Scan</ion-button></div>
        </ion-col>
        <ion-col>
          <div><ion-button routerLink="/transaction" class="dashboardBtn" color="primary">Add Transaction</ion-button></div>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <div><ion-button  routerLink="/report" class="dashboardBtn" color="primary">Report</ion-button></div>
        </ion-col>
        <ion-col>
          <div><ion-button  routerLink="/help" class="dashboardBtn" color="primary">Help</ion-button></div>
        </ion-col>
      </ion-row>
    </ion-grid>
</ion-content>
 <!-- END CONTENT -->

我的错误是：无法匹配任何路线。 URL 段：'tabs/dashboard/barcode'

感谢提前！

【参考方案1】：

对于第二个问题，如果你需要在帮助中访问你的其他页面，你需要在app-routing.module.ts中声明路径

`

  path: 'report', loadChildren: './report/report.module#ReportPageModule' ,

然后在帮助页面中执行一个方法

goToReport () this.router.navigateByUrl('reportPage');

【参考方案2】：

解决方案 1 和我的首选）您可以使用分段而不是选项卡。这是链接Segment reference

解决方案 2 根据您当前的代码）您可以为选项卡提供此参考。 使用 ion-tab 而不是 ion-button。

请点击链接Tabs reference

【参考方案3】：

感谢您的解释和链接。我想使用这些按钮访问我的其他页面：

我也可以使用选项卡，或其他解决方案吗？？？

【讨论】：

那么你应该使用为每个按钮点击事件创建方法。就像条形码有自己的事件一样，其他的也一样。如果您使用条件获得那些动态相同的方法并使用该方法传递单击按钮 arg。如果您创建 sap-rate 事件，那么您需要这样的路由功能。 TS侧。 openCart() if (this.count) this.router.navigate(['cart']);// 根据您的页面设置，如子级或父级，您可以使用它。 html 方面。

我试图添加你的命令行：我的dashboard.page.ts 上的打字稿我的dashboard.page.html 上的HTML，但是按钮不起作用并且关于“点击”被禁用

您的代码中必须有条件工作，因此需要在没有任何条件的情况下尝试，然后您可以根据要求更新您的条件。否则，这在我的代码中工作正常，目前我在我的代码中使用相同的东西，而没有点击数据传输。如果您想在导航中携带数据，则需要使用不同的代码行。