Angular 2 RouterLinkActive class for child routes

2019-07-14 06:12发布

问题:

I have a nav component with a sub nav associated to it. The data structure is as follows:

{
    title: 'Layout', routerLink: 'layout', // main nav
    subNav: // sub nav
    {
      title: 'Layout',
      items: [
        { title: 'Layout', routerLink: 'layout' },
        { title: 'Page Layout', routerLink: 'page-layout' },
      ]
    }
  }

I would like to create a link between the main nav and the sub nav so that when page-layout is navigated to, the active class is still set. My current parent HTML is:

    <div [routerLink]="[item.routerLink]" 
        [routerLinkActive]="['active']" 
        [routerLinkActiveOptions]="{ exact: true }" #navitem>   

          // navigation specific html

    </div>

I have attempted to add multiple routerlinks options and provide an array of routerlink options such as

[routerLink]="['/layout', '/page-layout']"

but this doesn't work.

Thanks