如何覆盖 Angular 11 路由中的父组件？答案

【问题标题】：how to override parent component in angular 11 routing?如何覆盖 Angular 11 路由中的父组件？
【发布时间】：2021-04-15 07:39:49
【问题描述】：

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

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

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

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

【问题讨论】：

标签： angular typescript angular-ui-router

【解决方案1】：

我们可以通过路由器中的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);
    }

【讨论】：