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

Question

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

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

我认为有两个大问题：

<a routerLink="some/link> 在功能模块中不起作用，仅在应用程序模块中起作用：它在标记中呈现为纯文本，无法正常工作 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>

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

这次打字稿之旅的两大教训：

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

以后了解这些，会帮助我更好的设计应用。核心应用是什么我们所有的功能模块都插入其中，并在提供应用程序时启动。现在进出口的结构有一个统一的结构，并且您永远不会有关于如何访问服务或界面的问题。

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

Looking for pointers on routing between feature modules in angular

javascript

routes

module

typescript

angular