Сделать первую вкладку активным по умолчанию

Question

Я использую следующий фрагмент html.

1.) Как я могу сделать общую вкладку активной по умолчанию. Я попытался добавить активный класс, но как-то первый из них активен каждый раз.

2.) Как только я нажимаю вкладки, и если я перезагружаю страницу, я получаю следующую ошибку, и вся страница, похоже, сломается. URL-адрес возвращается к базовому URL

EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'DataConfigurationGeneralDetailComponent' 
Error: Cannot find primary outlet to load 'DataConfigurationGeneralDetailComponent' 

HTML

 <ul class="nav nav-tabs" role="tablist"> 
      <li class="nav-item"><a class="nav-link" 
       data-toggle="tab" 
       [routerLink]="['general']" [routerLinkActive]="['active']" 
       role="tab" dpTranslate="dataconfiguration.tabs.general">General</a></li> 
      <li class="nav-item"><a class="nav-link" data-toggle="tab" 
       [routerLink]="['mapping']" [routerLinkActive]="['active']" 
       dpTranslate="dataconfiguration.tabs.mappings">Mappings</a></li> 
      <li class="nav-item"><a class="nav-link" data-toggle="tab" 
       [routerLink]="['target']" [routerLinkActive]="['active']" 
       dpTranslate="dataconfiguration.tabs.target">Target</a></li> 
     </ul> 
     <!-- Tab panes --> 
     <div class="tab-content"> 
      <router-outlet></router-outlet> 
     </div> 

МАРШРУТЫ

export const tenantRoute: Route[] = [ 
    { 
     path: 'tenant', 
     component: TenantComponent, 
     data: { 
      authorities: ['ROLE_USER'], 
      pageTitle: 'tenant.home.title' 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: TenantDetailComponent, 
       data: { 
        authorities: ['ROLE_USER'], 
        pageTitle: 'tenant.home.title' 
       }, 

      }, 
      { 
       path: ':id/dataconfiguration/:id', 
       component: DataConfigurationDetailComponent, 
       data: { 
        authorities: ['ROLE_USER'], 
        pageTitle: 'dataconfiguration.home.title' 
       }, 
       children: [ 
        { 
         path: 'general', 
         component: DataConfigurationGeneralDetailComponent, 
         data: { 
          authorities: ['ROLE_USER'], 
          pageTitle: 'dataconfiguration.home.title' 
         } 
        }, 
        { 
         path: 'mapping', 
         component: DataConfigurationMappingDetailComponent, 
         data: { 
          authorities: ['ROLE_USER'], 
          pageTitle: 'dataconfiguration.home.title' 
         } 
        }, 
        { 
         path: 'target', 
         component: DataConfigurationTargetDetailComponent, 
         data: { 
          authorities: ['ROLE_USER'], 
          pageTitle: 'dataconfiguration.home.title' 
         } 
        } 
       ] 
      } 
     ] 
    } 
]; 

Answer 1

UPDATE:обновляется с примерами маршрутов обратиться комментарий на ответ.

Чтобы ответить на ваш первый вопрос, чтобы сделать вкладку вообще всегда вкладка по умолчанию, вы должны установить «поймать все (*)» маршрут, чтобы указать на закладке Общие компоненты.

Смотрите здесь для использования в routerLinkActive директивы: https://angular.io/docs/ts/latest/api/router/index/RouterLinkActive-directive.html

Для решения второго вопроса, убедитесь, что вы используете правильный импорт в вашей app.module.ts:

import { Routes, RouterModule } from '@angular/router'; 

и вы используете forRoot, например,

export const routing = RouterModule.forRoot(routesArrayGoesHere) 

- Обновлено содержание

Пример простой конфигурации маршрутизации будет, как показано ниже.

path: '' - это URL-адрес, если параметры не определены, это маршрут, который вы хотите использовать для загрузки первой вкладки, поэтому вы должны указать это на компонент «общая вкладка».

Путь path: '**' - это технически ловить все, когда он не может найти маршрут, в этом случае у меня есть страница с ошибкой.

const APP_ROUTES: Routes = [ { path: 'dashboard', component: DashboardComponent }, { path: '', component: DashboardComponent }, { path: '**', component: PageNotFoundComponent } ]

Вы сделали свою маршрутизацию более сложным путем вложения детей в нем. Я бы предложил сначала запустить вашу маршрутизацию с плоскими дорожками, а затем экспериментировать позже. то есть. Следует отметить, что я использовал Маршруты, а не Маршрут [] (возможно, то же самое, но что-то попробовать, если все еще есть проблемы).

export const tenantRoute: Route[] = [ { path: 'tenant', component: TenantComponent, data: { authorities: ['ROLE_USER'], pageTitle: 'tenant.home.title' }, }, { path: 'tenant:id', component: TenantDetailComponent, data: { authorities: ['ROLE_USER'], pageTitle: 'tenant.home.title' }, }, { path: 'tenant:id/dataconfiguration/:id', component: DataConfigurationDetailComponent, data: { authorities: ['ROLE_USER'], pageTitle: 'dataconfiguration.home.title' } }, { path: 'tenant:id/dataconfiguration/:id/general', component: DataConfigurationGeneralDetailComponent, data: { authorities: ['ROLE_USER'], pageTitle: 'dataconfiguration.home.title' } }, { path: 'tenant:id/dataconfiguration/:id/mapping', component: DataConfigurationMappingDetailComponent, data: { authorities: ['ROLE_USER'], pageTitle: 'dataconfiguration.home.title' } }, { path: 'tenant:id/dataconfiguration/:id/target', component: DataConfigurationTargetDetailComponent, data: { authorities: ['ROLE_USER'], pageTitle: 'dataconfiguration.home.title' } } ];

Answer 2

Это не делается в шаблоне, но в конфигурации маршрутизации.

Вы должны перенаправить на вашу общую вкладку по умолчанию:

{ path: ':id', component: MyPageComponent, children: [ 
    { path: '', redirectTo: 'general', pathMatch: 'full' }, 
    { path: 'general', component: MyGeneralTabComponent }, 
]}, 

в вашем случае, это означает, что при переходе к «/ жилец/123/dataconfiguration/456 /», вы будете автоматически перенаправлены to '/ tenant/123/dataconfiguration/456/general', а маршрутизация загрузит правильный компонент в маршрутизатор-розетку.

Редактировать: У вас, похоже, проблема в конфигурации маршрутизации, вы переопределяете: id, она уже определена один раз на родительском уровне.

{ 
    path: 'dataconfiguration/:id', // remove first :id, it's already defined in parent route 
    component: DataConfigurationDetailComponent, 
    data: { 
     authorities: ['ROLE_USER'], 
     pageTitle: 'dataconfiguration.home.title' 
    }, 
    children: [ 
     // Add default redirect here 
     { path: '', redirectTo: 'general', pathMatch: 'full' }, 
     { 
      path: 'general', 
      component: DataConfigurationGeneralDetailComponent, 
      data: { 
       authorities: ['ROLE_USER'], 
       pageTitle: 'dataconfiguration.home.title' 
      } 
     }, 
     { 
      path: 'mapping', 
      component: DataConfigurationMappingDetailComponent, 
      data: { 
       authorities: ['ROLE_USER'], 
       pageTitle: 'dataconfiguration.home.title' 
      } 
     }, 
     { 
      path: 'target', 
      component: DataConfigurationTargetDetailComponent, 
      data: { 
       authorities: ['ROLE_USER'], 
       pageTitle: 'dataconfiguration.home.title' 
      } 
     } 
    ] 
}