Angular 16 从子模块到另一个子模块的路由

Question

我想从一个子级路由到另一个延迟加载模块中完全不同的子级。我不断收到错误“无法匹配任何路由 - 客户端/客户端/客户端报告”

这是我的第一个延迟加载模块。如果您注意到当用户导航到客户端的子级时，我希望它重定向到另一个延迟加载模块中存在的报告

const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: 'clients', //site.com/clients
                component: ClientGridComponent,
                data: {
                    role: ['ADMIN', 'STAFF'],
                    breadcrumb: 'Client Grid',
                },
            },
            {
                path: 'client', //site.com/clients/client:id
                component: ClientComponent,
                data: {
                    role: ['ADMIN', 'STAFF'],
                    breadcrumb: 'Client Details',
                },
                children: [
                    {
                        path: 'clientreport',//site.com/clients/client:id/clientreport
                        **redirectTo: 'reporting/reports/reportviewer'**,
                    },
                ],
            },
            {
                path: '',
                redirectTo: 'clients',
                pathMatch: 'full',
            },
        ],
    },
];

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

这是我希望 clientreporting 导航到的第二个延迟加载模块

const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: 'reports', //sitename.com/reports
                component: ReportGridComponent,
                data: {
                    breadcrumb: 'Report Grid',
                },
            },
            {
                path: 'reportviewer', //sitename.com/reports/reportviewer
                component: PDFViewerComponent, <-- Want to navigate to here from other route
                data: {
                    breadcrumb: 'Report Viewer', 
                },
            },

            {
                path: '',
                redirectTo: 'reports',
                pathMatch: 'full',
            },
        ],
    },
];

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

Answer 1

在您的场景中，您希望从 ClientRoutingModule 中的子路由导航到 ReportRoutingModule 中完全不同的子路由，该子路由属于另一个延迟加载模块。为此，您不能直接在子路由配置中使用redirectTo 属性。相反，您应该使用路由防护或服务以编程方式处理此重定向。

实现此目的的一种方法是创建路由守卫

1.创建路由守卫：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class RedirectGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // Perform any logic here to determine if redirection is needed.
    // For example, check user roles or any other condition.
    // If redirection is needed, navigate to the desired route.
    this.router.navigate(['reporting', 'reports', 'reportviewer']);
    return false; // Returning false to prevent activating the original route.
  }
}

2.更新您的路线：

在 ClientRoutingModule 中，更新子路由配置以使用路由防护

import { RedirectGuard } from './redirect.guard'; // Import the guard

const routes: Routes = [
  // ... other routes
  {
    path: 'client',
    component: ClientComponent,
    children: [
      {
        path: 'clientreport',
        canActivate: [RedirectGuard], // Use the guard here
      },
    ],
  },
  // ... other routes
];