Angular 11 - 如何隔离路线答案

【问题标题】：Angular 11 - how to isolate routesAngular 11 - 如何隔离路线
【发布时间】：2021-01-04 13:59:10
【问题描述】：

由于没有更好的标题，这是用例：有：

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

预期：调用 http://localhost/userhandler 应该重定向到：http://localhost/userhandler/login 并在出口加载 LoginComponent：userhandling
实际：重定向到 http://localhost/userhandler，并在 PRIMARY 处重新加载 UserHandlerComponent

应用组件.html：

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

应用模块：

...
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 { }

用户处理程序模块：

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 {}

用户处理程序.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>

为了便于阅读，所有显示的都是 sn-ps。

如何堆叠路由，但保持路由隔离并由响应模块处理？

【问题讨论】：

标签： angular

【解决方案1】：

更新，

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

【讨论】：