Question

我在Angular 6.1.0中工作。

我需要在配置了异步路由器的另一个组件的“应用程序组件”中的区域（名为路由器出口）中进行加载。

在版本6.1.0的变更日志中，它表示：

router：修复辅助路由的延迟加载（＃23459）（5731d07），关闭＃ 10981

在我的项目中，这不起作用：

根路由器配置：

const routes: Routes = [
  { path: "products", component: ProductListComponent },
  { path: "product/:id", component: ProductDetailComponent },
  {
    path: "",
    component: SidebarComponent,
    outlet: "sidebar"
  },
  {
    path: "products",
    component: ProductListSidebarComponent,
    outlet: "sidebar"
  },
  {
    path: "tests",
    loadChildren: "app/test-async/test.async.module#TestAsyncModule"
  }
];

export const routingModule: ModuleWithProviders = RouterModule.forRoot(routes);

测试异步模块（路由器配置）

const TEST_ROUTER: Routes = [
    {
        path: '',
        component: TAsyncComponent,
        outlet: 'sidebar'
    }
];

export const routes = RouterModule.forChild(TEST_ROUTER);

应用程序组件（模板）

<div style="text-align:center">
    <h1>
        Welcome to {{ title }}!
    </h1>
    <h2>
        Read <a href="https://www.techiediaries.com/angular-router/">Angular router tutorial</a> and 
        <a href="https://www.techiediaries.com/angular-tutorial/">Angular 6 tutorial</a>
    </h2>

    <a [routerLink]="[{ outlets: { primary: ['products'],sidebar: ['products'] } }]">
        Products
    </a>

    <br>
    <br>

    <a [routerLink]="[{ outlets: { primary: ['products'],sidebar: ['tests'] } }]">
        Tests
    </a>

</div>

<div>
    <div style="float:right">
        <router-outlet></router-outlet>
    </div>
    <div style="float:left">    
        <router-outlet name="sidebar"></router-outlet>
    </div>
</div>

单击测试链接后，该错误将显示在控制台中。

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tests'
Error: Cannot match any routes. URL Segment: 'tests'
    at ApplyRedirects.noMatchError (router.umd.js:1455)
    ...

如果直接配置路由且没有异步负载，则链接将以正确的方式运行。

在这里，我将沙箱留在项目中，以便您可以看到错误。

有什么建议吗？

编辑：8/8/2018

如果我更改根目录配置：

{
   path: "tests",
   loadChildren: "app/test-async/test.async.module#TestAsyncModule" 
   outlet: 'sidebar'
}

，在模块路由中，我更改为：

{
  path: '',
  component: TAsyncComponent,
}

路由工作！！

但是....我正在强制将异步加载的模块中定义的所有路由呈现在某个区域中，而不是该路由可以决定父级中定义的区域。（导入模块）

也许这是一个概念问题，并且路由是分层的并且可以向下访问，并且不允许访问层次结构中更高级别定义的路由。

有人可以澄清吗？概念问题？还是在Angular路由中缺少的东西？

具有异步子路由器的命名路由器出口

0 个答案: