在 angular 中寻找有关功能模块之间路由的指针

Question

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

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

我认为有两个大问题：

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

2. 我希望路由到功能模块，如果以这种方式配置，可以显示不同的标记和样式，例如 - 路由到模块 a 显示一个导航菜单，路由到模块 b 显示另一个。 相反，默认行为发生-app.component 到处显示，并且路由到功能模块使得 url 指定的组件出现在 router-outlet 的位置。 如果可能，我想禁用此默认行为，以便路由到一个功能模块中的组件具有一组 styles 和功能，并且路由到另一个模块中的组件具有不同的样式和功能 - 就好像路由器插座识别该feature-a/component一样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 { }

应用路由.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 {
  }

}

章标记

<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*/ 
      ]
    }
]

本次 typescript 之旅的两大教训：

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

将来，知道这一点将帮助我更好地设计应用程序。 核心应用程序是我们所有功能模块插入的内容，以及在提供应用程序时被引导的内容。 现在，导入和导出的结构有了统一的结构，您永远不会有关于如何访问服务或接口的问题。