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

Posted 2023-02-19

【中文标题】寻找有关角度功能模块之间路由的指针

【英文标题】：Looking for pointers on routing between feature modules in angular

【发布时间】：2021-07-06 10:17:39

【问题描述】：

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

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

在我看来有两个大问题：

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

我希望路由到功能模块，如果以这种方式配置，可以显示不同的标记和样式，例如 - 路由到模块 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>

【参考方案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*/ 
      ]
    
]

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

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

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