Question

我想导航至我的选项卡中的一个页面，并且想将路由放入该选项卡模块中，我尝试了很多方法，但我做不到。我知道如果我在tabs.module中声明该页面会解决我的问题，但我想在它自己的选项卡中声明它，然后导航到它。我认为项目结构将阐明我的意思！

-tabs
 -tab-notification
 -tab-profile
   -settings-modal

这是我的app.routing.module

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

const routes: Routes = [
  { path: 'tabs', redirectTo: '', pathMatch: 'full' },
  { path: '', loadChildren: './pages/tabs/tabs.module#TabsPageModule' },
];

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

这是tabs.page.module，我在其中初始化了路线

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { TabsPage } from './tabs.page';
import { TabProfilePageModule } from '../tab-profile/tab-profile.module';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      { path: 'tab-notification', loadChildren: '../tab-notification/tab-notification.module#TabNotificationPageModule' },
      { path: 'tab-profile', loadChildren: '../tab-profile/tab-profile.module#TabProfilePageModule' },

    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [TabsPage]
})
export class TabsPageModule { }

这是标签资料，我想在其中初始化设置路由

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { TabProfilePage } from './tab-profile.page';

const routes: Routes = [
  {
    path: '',
    component: TabProfilePage,
    children:[
  { path: '/settings-modal', loadChildren: '../tab-profile/settings-modal/settings-modal.module#SettingsModalPageModule' },
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [TabProfilePage]
})
export class TabProfilePageModule {}

但是当我这样做时，我会收到此错误

core.js：9110错误错误：未捕获（已承诺）：错误：无法匹配任何路由。网址段：“设置模式”

如何使用angular在ionic 4的标签内创建路由？

0 个答案: