3

更新以澄清我的问题

我正在尝试让有孩子的路线和命名的网点工作，但没有运气。最初的想法是构建一个选项卡式导航，在我的应用程序中有深层链接。为了更好地理解，我已经将我的示例 stackblitz 项目分解为真正的问题。 似乎它正在导航到路线“/（列表：第一/（详细信息：第二））”，但DetailComponent不会加载。 我需要一个具有多个子路由和命名插座（'list'，detail'，...）的主路由来表示一个 url 链构建：/overview/(list:first)（第一个选项卡），/overview/(list :first/(detail:second)) （第二个选项卡），依此类推。

a 标签上的[routerLink]看起来像这样： <a [routerLink]="[ { outlets: { detail: ['second'] } }]">Component 1</a>

经过更多研究后，似乎/overview/list/(detail:detail/1)找到了路线： NavigationEnd {id: 2, url: "/overview/(list:first/(detail:second))", urlAfterRedirects: "/overview/(list:first/(detail:second))"}...

我的overview.component.html 看起来像这样：

<h2>Overview</h2>
<router-outlet name="list"></router-outlet>
<router-outlet name="detail"></router-outlet>

当命名的插座“详细信息”在我的 list.component.html 中时，它正在工作。

<p>
   <a [routerLink]="[ { outlets: { detail: ['second'] } }]">Component 1</a>
</p>
<router-outlet name="detail"></router-outlet>

但这不是我想要的。

所以我认为我没有路由配置问题，而是嵌套组件的问题。这个案子不是故意的吗？你有其他想法来解决这个问题吗？

这是我的路由器模块：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {ListComponent} from '../overview/list/list.component';
import {DetailComponent} from '../overview/detail/detail.component';
import {OverviewComponent} from '../overview/overview.component';

const routes: Routes = [
  {
    path: 'overview',
    component: OverviewComponent,
    children: [
      {
        path: 'first', component: ListComponent, outlet: 'list', children: [
          { path: 'second', component: DetailComponent, outlet: 'detail'
          }
        ]
      }
    ],
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes, {enableTracing: true}) ],
  exports: [ RouterModule ]
})
export class RouteModule { }

请查看我的 stackblitz 项目：https ://stackblitz.com/edit/angular-jgattb

谢谢您的帮助！

4

0 回答 0