Question

更新以澄清我的问题

我正在尝试获得带有孩子和命名网点的路线，但没有运气。最初的想法是建立一个标签式导航，在我的应用程序内部建立深层链接。我已经将我的示例stackblitz项目分解为真正的问题，以便更好地理解。 ~~似乎它正在导航到路线'/（list：first /（detail：second））'但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。

中指定的出口'detail'时，它正在工作

<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

感谢您的帮助！

儿童和指定出口不起作用的Angular 5 Route

0 个答案: