Angular 4 route.navigate 展开折叠的菜单

Question

我的 Angular 4 应用程序有一个导航侧边菜单，其中包含 2 个包含子菜单项的折叠项。除非我以编程方式路由到页面，否则菜单的路由可以找到。我可以在源代码中看到正确的菜单项被标记为活动状态，但它不会展开菜单以显示子菜单项。

navigation.componenet.html

<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav metismenu" id="side-menu">

            <li>
                <a [routerLink]="['/home']">
                    <i class="fa fa-home"></i> <span class="nav-label">Home</span>
                    <div class="hidden-lg hidden-md side-menu-phone-text">&nbsp;&nbsp;home</div>
                </a>
            </li>
            <li [routerLinkActive]="['active']">
                <a href="#">
                    <i class="fa fa-heartbeat"></i> <span class="nav-label">Number Pages</span> <span class="fa arrow"></span>
                    <div class="hidden-lg hidden-md side-menu-phone-text">&nbsp;&nbsp;numbers</div>
                </a>
                <ul class="nav nav-second-level collapse"  [routerLinkActive]="['in']">
                    <li [routerLinkActive]="['active']"><a [routerLink]="['/pageone']">Page One</a></li>
                    <li [routerLinkActive]="['active']"><a [routerLink]="['/pagetwo']">Page Two</a></li>
                    <li [routerLinkActive]="['active']"><a [routerLink]="['/pagethree']">Page Three</a></li>
                </ul>
            </li>
            <li [routerLinkActive]="['active']">
                <a href="#">
                    <i class="fa fa-gear"></i> <span class="nav-label">Color Pages</span> <span class="fa arrow"></span>
                    <div class="hidden-lg hidden-md side-menu-phone-text">&nbsp;&nbsp;colors</div>
                </a>
                <ul class="nav nav-second-level collapse"  [routerLinkActive]="['in']">
                    <li [routerLinkActive]="['active']"><a [routerLink]="['/pagered']">Page Red</a></li>
                    <li [routerLinkActive]="['active']"><a [routerLink]="['/pageblue']">Page Blue</a></li>
                    <li [routerLinkActive]="['active']"><a [routerLink]="['/pageblack']">Page Black</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

app.routes.ts

        export const appRoutes: Routes = [
        // Main redirect
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        {
            path: '', component: LayoutComponent,
            children: [
                { path: 'home', component: HomeComponent },

                { path: 'PageOne', component: PageOneComponent },
                { path: 'PageTwo', component: PageTwoComponent },
                { path: 'PageThree', component: PageThreeComponent },

                { path: 'PageRed', component: PageRedComponent },
                { path: 'PageBlue', component: PageBlueComponent },
                { path: 'PageBlack', component: PageBlackComponent },


            ]
        },
        // Handle all other routes
        { path: '**', redirectTo: 'home', pathMatch: 'full' }
    ];

编辑：我明白了。我需要将 [routerLinkActive]="['in']" 广告到 ul。我更新了上面的代码。

Answer 1

我想通了。我需要将 [routerLinkActive]="['in']" 广告到 ul。我更新了问题中的代码。

Angular 4 route.navigate 展开折叠的菜单

Angular 4 route.navigate expand collapsed menu

router

routerlinkactive

angular