寻找有关角度功能模块之间路由的指针

Question

我正在处理我的一个大型项目，发现了功能模块和路由模块，然后尝试实现它以更好地组织项目。当我这样做时，该应用程序变得非常失灵。从那时起，我做了这个测试项目，试图在更小、更易于管理的规模上实现功能模块之间的路由。

这个测试项目有效，但我知道有一些小问题会导致问题发生，我想解决。

在我看来有两个大问题：

1. <a routerLink="some/link> 在功能模块中不起作用，仅在应用模块中起作用：它在标记中呈现为纯文本，没有工作链接。作为最后的努力，我尝试将 routerLink 导入功能模块 module.ts 文件，但仍然没有。

2. 我希望路由到功能模块，如果以这种方式配置，可以显示不同的标记和样式，例如 - 路由到模块 a 显示一个导航菜单，路由到模块 b 显示另一个。相反，默认行为发生了——app.component 到处都显示，并且路由 到一个功能模块使得 url 指定的组件出现在路由器插座的位置。如果可能，我想禁用此默认行为，以便路由到一个功能模块中的组件具有一组样式和功能，并且路由到另一个模块中的组件具有不同的样式和功能 - 好像路由器插座识别 feature-a/component是 feature-a 的一部分，然后将模块的 html 和 css 作为 app.component 而不是根 app.component 加载。

附上下面的源代码，用于这个测试项目。我只包含了模块 feature-a 的源代码，因为 feature-b 本质上是相同的东西，但文本不同，以防止不必要的混乱

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FeatureAModule } from './feature-a/feature-a.module';
import { FeatureBModule } from './feature-b/feature-b.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FeatureAModule,
    FeatureBModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

App.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChalpComponent } from './feature-a/chalp/chalp.component';
import { FeatureAComponent } from './feature-a/feature-a.component';
import { FeatureBComponent } from './feature-b/feature-b.component';
import { SkoneComponent } from './feature-b/skone/skone.component';


const routes: Routes = [
/*     { path: 'feature-a', component: FeatureAComponent,
        children: [
            { path : 'feature-a/chalp', component: ChalpComponent }
        ]
    },
    { path: 'feature-b', component: FeatureBComponent,
        children: [
            { path : 'feature-b/skone', component: SkoneComponent }
        ]
    }
 */    
    { path : 'feature-a/chalp', component: ChalpComponent },
    { path : 'feature-b/skone', component: SkoneComponent },
    { path: 'feature-a', component: FeatureAComponent },
    { path: 'feature-b', component: FeatureAComponent },
    
];

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

app.component 的标记：

<h1>Inside App-Module now!</h1>

Go to feature A for chalp: <a routerLink="feature-a/chalp">Chalp</a>
Go to feature B for Skone: <a routerLink="feature-b/skone">Skone</a>
<router-outlet></router-outlet>

feature-a 路由+模块文件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes, RouterOutlet, RouterLink } from '@angular/router';
import { FeatureAComponent } from './feature-a.component';
import { ChalpComponent } from './chalp/chalp.component';


const routes : Routes = [
    { path : '', component : FeatureAComponent },
    { path : 'chalp', component: ChalpComponent}
]


@NgModule({
  declarations: [ChalpComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class FeatureAModule { }

chalp- feature-a 中的一个组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-chalp',
  templateUrl: './chalp.component.html',
  styleUrls: ['./chalp.component.css']
})
export class ChalpComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

chalp 标记

<p>chalp works!</p>
<a routerLink="../">Go back one</a>

Answer 1

答案更简洁：

使用延迟加载的功能模块。

// root module routing:

router.forRoot([
  // this is what ng documentation suggests
  { 
     path: 'admin',
     loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
  },
    each of these unique route prefixes 
    existing already in our bloated application.
    now is stored and carefully imported depending
    on when the contained resources are required
    by the user.
    ...


])

//then in each feature modules' routing module
router.forChild([
    // treat the first word as root, so url is not admin/admin!
    { path: '', component: AdminComponent,
      children: [
          /*All urls in our app which
           have 'admin' prefix*/ 
      ]
    }
]

本次打字稿之旅的两个重要教训：

1. 在使用之前始终了解框架及其设计方式。
2. 不仅功能模块处理导入和路由，它们还处理每个导入 一个名为util 的共享模块，其中包含整个应用使用的服务主模块、所有类型和接口、组件、管道和指令。

在未来，了解这一点将帮助我更好地设计应用程序。核心应用是什么 我们所有的功能模块都插入并在应用程序提供服务时被引导。现在，进口和出口的结构有了统一的结构，并且 您永远不会对如何访问服务或接口有任何疑问。