时间戳

首页 > 解决方案 > 在 Angular 中定义相对路由

angular - 在 Angular 中定义相对路由

问题描述

更新

我根据答案改变forRoot了。forChild

所以，基本上我有问题，让它成为一个子模块，

@NgModule({
  imports: [
    CommonModule,
    ARoutingModule,
    BModule
  ],
  declarations: [AppsComponent, ...],
  exports: [
    AppsComponent, ...
  ]
})
export class AModule { }

和

@NgModule({
  imports: [
    CommonModule,
    BRoutingModule
  ],
  declarations: [AppsComponent, ...],
  exports: [
    AppsComponent, ...
  ]
})
export class BModule { }

因此AModule，由根模块和两个模块导入，AModule并BModule应定义自己的路由，例如

// ./A/A-Routing.module.ts
const routes: Routes = [
  {
   path: 'A',//<-- this shall route to www.site.com/A
   component: AComponent
  }
  ];

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

在 SubSub 我有

// ./A/B/B-Routing.module.ts
const routes: Routes = [
  {
   path: 'B', //<-- this shall route to www.site.com/A/B
   component: BComponent,

   ]
  }
  ];

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

这可能吗？使用路径打印时，我可以获取子路由，但不能获取子子路由（即 B）。我可以在不知道之前的路径的情况下定义 B 中的路线吗？所以B在不知不觉中定义A

www.site.com/something/else

else在不知道的情况下定义路线something？

这是一个stackblitz示例，main有效，但Subs不要...

标签： angulartypescriptroutes

解决方案

您必须修复一些问题才能使其正常工作。

  1. 您必须为您添加一个开放路线，SubModule这将是一个延迟加载的模块。您将在 main-routing.module.ts 文件中执行此操作
const routes: Routes = [
  {
    path: 'main',
    component: MainComponent,
    children: [{
      path: 'sub',
      loadChildren: './sub/sub.module#SubModule'
    }]
  }
];
  1. 然后，您将创建一个名为的模块SubModule，SubRoutingModule并将充当 this 的路由模块SubModule。您将在此处声明您的 Sub1Component 和 Sub2Component：
import { Sub1Component, Sub2Component } from './sub.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SubRoutingModule } from './sub-routing.module';

@NgModule({
  declarations: [Sub1Component, Sub2Component],
  imports: [SubRoutingModule]
})
export class SubModule { }

所以现在您的路线将更改为：

<a routerLink="/main/sub/sub1">Sub1</a> | 
<a routerLink="/main/sub/sub2">Sub2</a>

这是一个更新的 StackBlitz供您参考。

推荐阅读