如何在带有 Ionic 选项卡的 Angular 应用程序中使用路由？

Question

我一直在尝试使用选项卡向我的 Ionic 应用程序添加路线，但无济于事。每当我向我的路由数组添加任何路由并更新应用程序时，本地主机服务器都会返回一个空白屏幕。我也在开发者工具控制台中得到这个错误：

Comonent MessagesComponent 不是任何 NgModule 的一部分，或者该模块尚未导入到您的模块中。

这是我的应用路由模块文件：

import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { MessagesComponent } from './messages/messages.component';
import { Tab1Page } from './tab1/tab1.page';
import { TabsPage } from './tabs/tabs.page';
const routes: Routes = [
  { path: 'messages', component: MessagesComponent},
  //This is how you define routes for tabs  
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },

  {
    path: '', loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot( routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

欢迎来到 StackOverflow！

您需要更加熟悉 Angular。错误告诉你该怎么做。您需要将消息组件导入模块的声明部分。因此，我假设您已经拥有AppRoutingModule，而您在某处还有一些app.module.ts。添加这个：

import { NgModule } from '@angular/core'
import { HttpClientModule } from '@angular/common/http'
import { BrowserModule } from '@angular/platform-browser'
import { IonicModule } from '@ionic/angular'

import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component'
import { MessagesComponent } from './messages/messages.component';  // <------

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    IonicModule.forRoot(),
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    // ...
  ],
  declarations: [
    AppComponent,
    MessagesComponent, // <------
  ],
})
export class AppModule {}

一般来说，我建议您将消息组件外包到消息模块中并像使用 TabsPageModule 一样延迟加载它，而 tab1 延迟技术已经过时了。

现在回到标签页

这就是它的样子：

app-routing.module.ts

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

const defaultRout = "/tabs"

const routes: Routes = [
  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then((m) => m.TabsModule),
  },

  // 404
  {
    path: '**',
    redirectTo: defaultRout, // or 404 module
  },
]

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

tab-routing.module.ts

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

import { TabsComponent } from './tabs.component'

const defaultRoute = "/tabs"

const routes: Routes = [
  {
    path: '', // tabs
    component: TabsComponent,
    children: [
      {
        path: '',
        redirectTo: defaultRoute,
        pathMatch: 'full',
      },

      // Routes
      {
        path: 'explore',
        loadChildren: () => import('../explore/explore.module').then((m) => m.ExploreModule),
      },

      // 404
      {
        path: '**',
        redirectTo: defaultRoute,
      },
    ],
  },
]

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

您在此处看到所有内容都在其自己的文件夹中并具有自己的模块。这可以防止以后出现一些问题，并使所有内容更加模块化。

PS：你可以在 SO:```typescript 中添加语法高亮