除非单击

Question

我在我的角度项目中将Bootstrap 4选项卡用于菜单控件。 Menu.Component.html

    <ul class="nav nav-tabs responsive" role="tablist">
    <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" data-toggle="tab" role="tab" [routerLink]="['/dashboard']" >Dashboard</a>
    </li>
    <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" data-toggle="tab" role="tab"  [routerLink]="['/search']" >Search</a>
    </li>
    <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" data-toggle="tab" role="tab"  [routerLink]="['/finance']" >Finance</a>
    </li>  
    </ul>

app.routing.ts

    const MAINMENU_ROUTES: Routes = [
        { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
        { path: 'search', component: SearchComponent },
        { path:'finance', component: FinanceComponent}
    ];
    export const CONST_ROUTING = RouterModule.forRoot(MAINMENU_ROUTES);

该应用程序的登录页面是“仪表板”。当我运行该应用程序时，仪表板组件已加载，但该选项卡未激活。 同样，如果我直接键入任何其他url，则组件将正确加载，但不会激活/选择任何选项卡。

请帮助。 注意：如果单击选项卡图标，一切正常。

请参考以下图片：

这应该像

还有

应该像

Answer 1

请使用下面的HTML代码，该代码应该与我在其代码中所做的工作相同：

<ul class="nav nav-tabs responsive" role="tablist">
    <li class="nav-item" routerLinkActive="active">
    <a [routerLink]="['/dashboard']" >Dashboard</a>
    </li>
    <li class="nav-item" routerLinkActive="active">
    <a  [routerLink]="['/search']" >Search</a>
    </li>
    <li class="nav-item" routerLinkActive="active">
    <a [routerLink]="['/finance']" >Finance</a>
    </li>  
    </ul>