Question

我在尝试导航到app / enter-transaction / product-select时收到错误。

错误：无法匹配任何路由。网址段：“ app / enter-transaction / product-selection”

这是我实现路由的方法。（包括延迟加载模块）

App.routing.module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { LayoutComponent } from "./layout/layout.component";

const routes: Routes = [
  {
    path: "",
    redirectTo: "app",
    pathMatch: "full"
  },
  {
    path: "app",
    component: LayoutComponent,
    children: [
      {
        path: "enter-transaction",
        loadChildren: () =>
          import(
            "./modules/enter-transaction.module/enter-transaction.module"
          ).then(mod => mod.EnterTransactionModule)
      }
    ]
  },
  {
   path: "login",
    component: LoginComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]
})
export class AppRoutingModule {}

enter-transaction.module

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { EnterTransactionRoutingModule } from "./enter- 
transaction.routing.model";

@NgModule({
  declarations: [],
  imports: [CommonModule, EnterTransactionRoutingModule]
})
export class EnterTransactionModule {}

enter-transcation-routing.module

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

import { ProductSelectionComponent } from "./../../enter- 
transaction/product-selection/product-selection.component";
import { InvestorDetailComponent } from "./../../enter- 
transaction/investor-detail/investor-detail.component";
import { EnterTransactionComponent } from "src/app/enter- 
transaction/enter-transaction.component";

const routes: Routes = [
  {
    path: "enter-transaction",
    component: EnterTransactionComponent,
    children: [
       {
        path: "product-selection",
        component: ProductSelectionComponent
      },
      {
        path: "investor-detail",
        component: InvestorDetailComponent
      }
    ]
  }
];

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

HTML结构

app.component.html

<router-outlet></router-outlet>

layout.component.html

<app-cxi-layout-header></app-cxi-layout-header>
<app-cxi-layout-sidemenu></app-cxi-layout-sidemenu>
<app-cxi-layout-content></app-cxi-layout-content>

cxi-layout-content.component.html

<div class="cxi-layout-outer-body ">
  <div class="cxi-layout-inner-body flex content-center">
    <router-outlet></router-outlet>
  </div>
</div>

enter-transaction.component.html

<h1>Enter-transaction > &&</h1>
<router-outlet></router-outlet>

product-selection.component.html

<p>product-selection works!</p>

我正在使用角度8。如果我不使用延迟加载。它将正常工作。但是，如果我使用延迟加载enter-transaction模块。它告诉我无法匹配否路线。我希望我能在正确的路线中看到产品选择组件的内容。

带有子路线的延迟加载模块

0 个答案: