Вкладка Bootstrap 4 не активируется, если не нажать

Question

Я использую вкладки начальной загрузки 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);

Целевой страницей приложения является панель инструментов. Когда я запускаю приложение, компонент Dashboard загружается, но вкладка не активируется. Аналогично, если я ввожу любой другой 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>