Question

我有3级菜单

的MainMenu

- SecondaryMenu

----子菜单

这些是不同模块中的不同组件。每个组件都有 <router-outlet></router-outlet>

当我点击SecondaryMenu的项目时，它没问题。我看到所有3个级别的菜单。但是当我点击SubMenu项目时，SecondaryMenu会消失。 SubMenu取代了SecondaryMenu路由器插座。

为什么SubMenu项目会转到父路由器的出口？

我的代码（缩短）： secondary.component.html

<div class="panel">
  <ul class="tab-items">
    <li class="tab-item" routerLinkActive="active">
        <a class="link" routerLink="/secondary/topics">
            <span>{{ 'Topics' | i18n }}</span>
        </a>
    </li>
  </ul>
  <div class="tabs">
    <router-outlet></router-outlet>
  </div>
</div>

secondary.routing.ts

const routes: Routes = [
{ path: "secondary", component: SecondaryComponent, children: [
    { path: "secondary", redirectTo: "/secondary/topics"},
    { path: "topics", component: TopicsComponent},
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SecondaryRoutingModule {

Submenu.component.html

<div class="panel">
<ul class="tab-items">
    <li class="tab-item" routerLinkActive="active">
        <a class="link" routerLink="/routing/input-points/script">
            <span>{{ 'WCScript' | i18n }}</span>
        </a>
    </li>
</ul>
<div class="tabs">
    <router-outlet></router-outlet>
</div>
</div>

Submenu.routing.ts

const routes: Routes = [
{
    path: "secondary/topics", component: TopicsComponent, children: [
    {path: "secondary/topics", redirectTo: "/secondary/topics/script"},
    { path: "script", component: WebScriptComponent} }
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SubmenuRoutingModule {

更新这有帮助，但子菜单组件应该知道它们在SecondaryComponent中：

path: "secondary", component: SecondaryComponent, children: [
    { path: "topics", component: TopicsComponent, children: [
        { path: "script", component: WebScriptComponent},

如何避免它？

Angular2路由器3级菜单

0 个答案: