时间戳

首页 > 解决方案 > 文件中的多个路由器插座不适用于延迟加载

angular - 文件中的多个路由器插座不适用于延迟加载

问题描述

我有这样的 app-component.html 文件：

<router-outlet></router-outlet>
<router-outlet name="menu"></router-outlet>

我的 app-routing.ts 是这样的：

{ path: '', loadChildren: () => import('./features/home/home.module').then(m => m.HomeModule) },
{ path: '', outlet: 'menu', loadChildren: () => import('./features/catalog/catalog.module').then(m => m.CatalogModule)}

但是当我启动我的应用程序时，我遇到了这个错误：

core.js:4352 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'routes' of undefined
TypeError: Cannot read property 'routes' of undefined
    at getChildConfig (router.js:3046)

似乎这是一个已知错误并且它无法正常工作，所以我尝试了这个：

  {
    path: '',
    outlet: 'menu',
    component: MenuProxyRouteComponent,
    children: [{
      path: 'test',
      loadChildren: () => import('./features/catalog/catalog.module').then(m => m.CatalogModule)
    },
    { path: '**', redirectTo: 'test', pathMatch: 'full' }
  ]
  },

使用我的 MenuProxyRouteComponent：

import { Component } from '@angular/core';

@Component({
    selector: 'menu-proxy-route',
    template: '<router-outlet></router-outlet>',
})
export class MenuProxyRouteComponent {
}

我没有以前的错误，但现在我有这个：

    ERROR in src/renderer/app/features/menu/menu.proxy.component.ts:5:16 - error NG8001: 'router-outlet' is not a known element:
    1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
    2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    
    5     template: '<router-outlet></router-outlet>',

我不明白为什么会出现此错误，因为我在 app.component.html 文件中有一个并且它工作正常。

任何人都知道如何在 app.component.html 中使用多个延迟加载？或者为什么我有第二个错误？

谢谢

标签： angularlazy-loadingangular2-routing

解决方案

我将用一个例子来解释它。对于这个多router-outlet

<router-outlet name="left"></router-outlet>
<router-outlet name="right"></router-outlet>

尝试更改app-routing.module或相关的路由文件如下

{
  path: 'list',
  component: LeftComponent,
  outlet: 'left'
},
{
  path: ':id',
  component: RightComponent,
  outlet: 'right'
}

推荐阅读