如何覆盖 angular 11 路由中的父组件？

Question

在 angular 我有这个用于导入模块的主要应用程序路由，并将布局组件设置为所有导入的路由，但我想更改某些路由的布局，例如模块中的打印页面，请参阅主要路线：

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: 'buySell',
        loadChildren: () =>
            import('../modules/buySell/buySell.module').then(
                (m) => m.BuySellModule
            ),
      },
      {
        path: 'product',
        loadChildren: () =>
            import('../modules/product/product.module').then(
                (m) => m.ProductModule
            ),
      },
      {
        path: '',
        redirectTo: '/dashboard',
        pathMatch: 'full',
      },
      {
        path: '**',
        redirectTo: 'error/404',
      },
    ],
  },
];

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

并导入所有模块路由并为所有设置 LayoutComponent，现在我想在布局不同的模块中创建打印页面，请参阅子模块：

const routes: Routes = [
  {
    path: '',
    component: BuySellComponent,
    children: [
      {
        path: 'preInvoice',
        // canActivate: [PermissionGuard],
        component: BuySellPreInvoiceListComponent,
        // data: {permissions:  [ ]},
      },
      {
        path: 'preInvoice/add',
        component: BuySellPreInvoiceEditComponent
      },
      {
        path: 'preInvoice/edit/:id',
        component: BuySellPreInvoiceEditComponent
      },


      { path: '**', redirectTo: 'oopsRoutingFile', pathMatch: 'full' },
    ],
  },


  // this is my print and I need to change the parent layout
  {
    path: 'preInvoice/print/:id',
    component: BuySellPreInvoicePrintComponent,
  },



];

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

如何删除或覆盖父布局组件？

Answer 1

我们可以通过router中的resetConfig方法更改路由配置。要更改当前配置并在现有配置中添加另一个页面，我们可以在 routeConfig.ts 文件

中写出根路由配置

routeConfig.ts

export const routes: Routes = [
  {
    path: '',
    component: BuySellComponent,
    children: [
      {
        path: 'preInvoice',
        // canActivate: [PermissionGuard],
        component: BuySellPreInvoiceListComponent,
        // data: {permissions:  [ ]},
      },
      {
        path: 'preInvoice/add',
        component: BuySellPreInvoiceEditComponent
      },
      {
        path: 'preInvoice/edit/:id',
        component: BuySellPreInvoiceEditComponent
      },
      { path: '**', redirectTo: 'oopsRoutingFile', pathMatch: 'full' },
    ],
  }
]

在 app.routing.module.ts 中，我们可以从该文件导入该配置并使用它。

import { routes } from './routes/routeConfig';

在component.ts文件中，我们需要将路由器对象注入到构造函数中，并从该组件的routeConfig.ts文件中导入默认路由配置，然后使用resetConfig方法并根据需要更改配置

    import {routes} from '../../route/routeConfig';

    constructor(router: Router) {}
     
    someMethod() {
       let additionalRoute ={
            path: 'preInvoice/print/:id',
            component: BuySellPreInvoicePrintComponent,
       };
   
       let routeConfig = [...routes];
       
       routeConfig[0].children.splice(2, 0, additionalRoute );
      
       this.router.resetConfig(routeConfig);
    }

如何覆盖 angular 11 路由中的父组件？

how to override parent component in angular 11 routing?

typescript

angular-ui-router

angular