Angular 2嵌套路由设置根元素活动类

时间:2016-12-09 07:58:54

标签: angular routing routes

我已经使用附带的路由器在NG2中创建了一个嵌套(childroutes)路由,现在我想在选择子路由时将主菜单项设置为活动状态。

工作plunkr with nested routes(Plunker示例需要大约1200px宽度,然后才能看到Menue项目 - 对不起)

我的问题是,我的主要菜单需要直接加载子菜单内容,所以我的主菜单代码看起来像

<li routerLinkActive="active">
   <a [routerLink]="['/logviewer', 'logsuche']"  title="Logviewer">
        Logviewer
    </a>
</li>

所以它只显示为活动状态,当我的子项目&#34; logsuche&#34;显示

<li routerLinkActive="active">
     <a routerLink="/logviewer/logsuche">
        Logsuche
     </a>
</li>

但是当我点击&#34; logmonitor&#34;然后主菜单不再显示为活动

 <li routerLinkActive="active">
     <a routerLink="/logviewer/logmonitor">
         Logmonitor
     </a>
 </li>

是否可以使用路由指令,或者我是否需要编写自己的主动指令?

我当前的路线配置

const routes: Routes = [
  { path: '', redirectTo: '/logviewer/logsuche', pathMatch: 'full' },
  {
      path: 'logviewer', component: LogviewerMenue,
      children: [
         { path: 'logsuche', component: LogSucheComponent },
         { path: 'logmonitor', component: LogmonitorComponent }
      ]
    }
 ];

enter image description here

0 个答案:

没有答案