Angular 11 -如何隔离路由

Question

在缺乏更好的标题的情况下，这是一个用例:拥有：

App-module/routing/Component
Userhandler-module/routing/component
Login-component
NewUser-component

预期:调用http://localhost/userhandler应重定向到：http://localhost/userhandler/login并在outlet: userhandling处加载LoginComponent

实际:重定向到http://localhost/userhandler，并在主服务器上重新加载UserHandlerComponent

App-component.html：

<div style="text-align:center"class="container">
  <h1>
    Welcome {{title}}!
  </h1>
<router-outlet></router-outlet>

App-module：

...
import { AppRoutingModule } from './app-routing.module';
@NgModule({
 declarations: [
 ...
 ],
 imports: [
 AppRoutingModule,
 ... 
 ],

App-routing.module：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserHandlerComponent } from "./user-handler/user-handler.component";
//import {UserHandlerModule  } from "./user-handler/user-handler.module";
const routes: Routes = [
  {path: '', redirectTo: '/userhandler', pathMatch: 'full'},
  {path: 'userhandler', component: UserHandlerComponent, loadChildren: () => import('./user-handler/user-handler.module').then(m => m.UserHandlerModule)},
];

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

user-handler.module：

import { NgModule } from '@angular/core';
import {UserHandlerComponent  } from "./user-handler.component";
import { UserHandlerRoutingModule} from "./user-handler-routing.module";
import { CommonModule } from '@angular/common';


@NgModule({
  declarations: [UserHandlerComponent],
  imports: [CommonModule, UserHandlerRoutingModule],
  exports: [UserHandlerComponent],
})
export class UserHandlerModule { }

user-handler-routing.module：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent} from "../login/login.component";
import { NewAccountComponent } from "../new-account/new-account.component";


const routes: Routes = [
  
  { path: '', redirectTo: '/userhandler/login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent, outlet: 'userhandling', pathMatch: 'prefix' },
  { path: 'new', component: NewAccountComponent, outlet: 'userhandling' },
  
];


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

user-handler.component.html：

div class="top">
    <mat-grid-list cols="2" rowheight="20px">
        <mat-grid-tile cols="1">
            
        </mat-grid-tile>
        <div class="logininfo">
        <mat-grid-tile cols="2">
            <router-outlet name="userhandling"></router-outlet>
        </mat-grid-tile>
        </div>
    </mat-grid-list>
</div>

所有显示的代码片段都是可读性的。

如何在保持路由隔离并由响应模块处理的情况下堆叠路由？

Answer 1

更新，

好吧，为了回答我自己的问题，我需要生成一个新模块并处理该模块中的所有路由。因此，例如，模块user-handler-module有一个user-handler- routing - module，它处理用户处理程序的所有路由(登录、身份验证、重定向等)