为什么我的屏幕路由逻辑不起作用？

Question

我想使用从 ionic3 迁移的 ionic4 应用程序正确进行页面转换。

我想移动设置页面，但它不起作用。

作为页面过渡的结构，
标签在顶部，主页在其下方，
它旨在从主页过渡到设置屏幕。
（标签⇒主页⇒设置）

this.router.navigateByUrl ('tabs / home / settings')
, 但是即使点击了目标按钮，画面也不会改变。
（还有其他的画面可以正确转场，但我无法通过比较来区分。）

请查看下面的代码。

home.page.hmtl

<ion-buttons class="settings-button" slot="primary">
 <ion-button icon-only (click)="selectFavorites()">
  <ion-icon name="ios-settings"></ion-icon>
 </ion-button>
</ion-buttons>

home.page.ts

selectFavorites() {
 this.router.navigateByUrl('tabs/home/settings');
}

home-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: HomePage
  },
  {
    path: 'settings',
    loadChildren: '../home/fav-settings/fav-settings.module#FavSettingsPageModule'
  }
];

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

settings.module.ts

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    FavSettingsPageRoutingModule
  ],
  declarations: [FavSettingsPage]
})
export class FavSettingsPageModule {}

settings-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: FavSettingsPage
  }
];

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

tabs-routing.module.ts

const routes: Routes = [
{
  path: '',
  component: TabsPage,
  children: [
    {
      path: 'home',
      children: [
        {
          path: '',
          loadChildren: () =>
            import('../home/home.module').then(m => m.HomePageModule)
        },
      ]
    },
    {
      path: '',
      redirectTo: 'home',
      pathMatch: 'full'
    }
  ]
},
{
  path: '',
  redirectTo: 'home',
  pathMatch: 'full'
}
];

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

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then( m => m.TabsPageModule)
  },
];

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

app.module.ts

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        LinkyModule,
        IonicModule.forRoot({mode:'ios', backButtonText: '', swipeBackEnabled: true}),
        AppRoutingModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            }
        }),
    ],
    bootstrap: [AppComponent],
    providers: [
        Calendar,
        StatusBar,
        SplashScreen,
        InAppBrowser,
        Geolocation,
        Network,
    ]
})
export class AppModule { }

对于给您带来的任何不便，我们深表歉意，但谢谢。

Answer 1

请尝试
loadChildren: () => import('../home/fav-settings/fav-settings.module#').then(m => m.FavSettingsPageModule)
在您的 home-routing.module.ts 中，确保模块已正确导入。
希望这会有所帮助。

Answer 2

您的问题对我来说太长了，如果我无法正确理解，请见谅。让我试着用非常简单的方式来回答。

当我们创建新的 Ionic 项目时，我们可以看到 Home 和 List 是默认创建的两个页面。

所以，app-routing-module.ts 将如下所示。我已经将两者都移到了 app 文件夹之外的新 pages 文件夹中，因此您可以在导入时看到路径。

    const routes: Routes = [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', loadChildren: () => import('../pages/home/home.module').then(m=> m.HomePageModule) },
      { path: 'list', loadChildren: () => import('../pages/list/list.module').then(m=> m.ListPageModule) }}
    ];

现在，如果默认情况下我想路由到特定页面，那么我的代码将如下所示。

    export class HomePage {
      constructor(private router: Router) { // on load of HomePage it will redirect to List Page
        this.router.navigateByUrl('list');
      }
    }

其中navigateByUrl 中的list 是来自app-routing-module.ts 的Routes 数组的path 属性的名称。

我们不需要像我们在同一个路由数组中导入时那样传递完全限定符路由名称。

Answer 3

您可以通过以下方式实现：

home.page.ts

selectFavorites() {
    this.router.navigateByUrl('settings');
}

home-routing.module.ts

const routes: Routes = [
  {
     path: '',
     component: HomePage
  }
];

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

app-routing.module.ts

 const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    {
      path: 'login',
      loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
    },
    {
      path: 'tabs',
      loadChildren: () => import('./tabs/tabs.module').then( m => m.TabsPageModule)
    },
    {
       path: 'settings',
       loadChildren: () =>
          import('./home/fav-settings/fav-settings.module').then(
          m => m.FavSettingsPageModule
       )
    }
 ];

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