Angular 在角节点中定义相对布线

Angular 在角节点中定义相对布线,angular,typescript,routes,Angular,Typescript,Routes,更新 根据答案,我用forChild更改了forRoot 所以,基本上我必须解决这个问题,让它成为一个子模块 @NgModule({ imports: [ CommonModule, ARoutingModule, BModule ], declarations: [AppsComponent, ...], exports: [ AppsComponent, ... ] }) export class AModule { } 及 因此,AMo

更新

根据答案,我用
forChild
更改了
forRoot

所以,基本上我必须解决这个问题,让它成为一个子模块

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

因此,
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 { }
定义
其他
的路由,而不知道
什么


下面是一个例子,
main
可以工作,但是
Subs
不能工作。

要使其正常工作,您必须解决一些问题

  • 您必须为您的
    子模块
    添加一条开放路径,这将是一个延迟加载的模块。您将在main-routing.module.ts文件中执行此操作

  • 然后,您将创建一个名为
    子模块
    的模块,
    子例程模块
    将充当此
    子模块
    的路由模块。您将在此处声明子1组件和子2组件:

  • 因此,现在您的路线将更改为:

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

    对于您的参考。

    要使其正常工作,您必须解决一些问题

  • 您必须为您的
    子模块
    添加一条开放路径,这将是一个延迟加载的模块。您将在main-routing.module.ts文件中执行此操作

  • 然后,您将创建一个名为
    子模块
    的模块,
    子例程模块
    将充当此
    子模块
    的路由模块。您将在此处声明子1组件和子2组件:

  • 因此,现在您的路线将更改为:

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

    供您参考

    子路由模块中的
    forRoot
    更改为
    forChild

    // ./Sub/subsub/SubSub-Routing.module.ts
    const routes: Routes = [
      {
       path: 'subsub', //<-- this shall route to www.site.com/sub/subsub
       component: SubSubComponent,
       ]
      }
     ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)], //<-- change here
      exports: [RouterModule],
      declarations: []
    })
    export class SubSubRoutingModule { }
    
    /./Sub/subsub/subsub-Routing.module.ts
    常数路由:路由=[
    {
    
    路径:'subsub',//将
    forRoot
    更改为
    forChild
    中的
    subroutingmodule

    // ./Sub/subsub/SubSub-Routing.module.ts
    const routes: Routes = [
      {
       path: 'subsub', //<-- this shall route to www.site.com/sub/subsub
       component: SubSubComponent,
       ]
      }
     ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)], //<-- change here
      exports: [RouterModule],
      declarations: []
    })
    export class SubSubRoutingModule { }
    
    /./Sub/subsub/subsub-Routing.module.ts
    常数路由:路由=[
    {
    

    路径:“subsub”,//
    RouterModule.forRoot([])
    仅用于在应用程序的根模块中进行路由。若要在其他模块中使用路由,请使用
    RouterModule.forChild([])
    RouterModule.forRoot([])
    仅用于在应用程序的根模块中进行路由。要在其他模块中使用路由,请使用
    RouterModule.forChild([])
    ,这是可行的,但
    subsubsub
    (我在OP中将其更改为A和B,认为这更清楚)让routet进入根目录,即
    /subsubsub
    而不是
    /Sub/subsub
    ,您应该使用惰性模块来实现。查看此演示以供参考我添加了一个stackblitz示例这是您的演示的修改版本,这正是我想要的!非常好,但
    subsubsub
    (我在OP中将其改为A和B,认为这更清楚)让routet进入根目录,即
    /subsubsub
    而不是
    /Sub/subsub
    ,您应该使用Lazy模块来实现。查看此演示以供参考我添加了一个stackblitz示例这是您的演示的修改版本,这正是我要找的!ExcellentI需要在不同的位置有多个路由文件您当前的实现存在严重的体系结构问题。请您分享一个更具体的模块示例,也许还有一个复制您的问题的最小stackblitz示例?op.@rst中的stackblitz示例,请查看我的更新答案。希望这能帮助您实现您想要的。我需要多个rou正在将文件放置在不同的位置。您当前的实现存在严重的架构问题。能否请您分享一个更具体的模块示例,以及一个复制您的问题的最小stackblitz示例?请阅读op.@rst中的stackblitz示例。希望这能帮助您实现您的目标你正在努力。
    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>
    
    // ./Sub/subsub/SubSub-Routing.module.ts
    const routes: Routes = [
      {
       path: 'subsub', //<-- this shall route to www.site.com/sub/subsub
       component: SubSubComponent,
       ]
      }
     ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)], //<-- change here
      exports: [RouterModule],
      declarations: []
    })
    export class SubSubRoutingModule { }