时间戳

首页 > 解决方案 > 为什么子路由不会显示在 IONIC/Angular 中？

angular - 为什么子路由不会显示在 IONIC/Angular 中？

问题描述

我想使用 IONIC/Angular 为多页网站创建一个导航栏。这里的问题是，写在 order.page.html 中的内容，它是 navbar.page 的子项，不会显示出来，即使我想从 order.page.ts 打印一些东西，也不会打印任何内容。下面的这段代码应该足以检测出问题出在哪里。

导航栏路由.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NavbarPage } from './navbar.page';

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

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

应用程序路由.module.ts

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

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./navbar/navbar.module').then( m => m.NavbarPageModule)
  },
];

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

标签： angularroutesionic4

解决方案

我忘了在 html 部分添加路由器插座，这就是为什么

推荐阅读