默認情況下使第一個選項卡處於活動狀態

Question

我正在使用以下html代碼段。

1.）我如何使默認的常規選項卡激活。我試圖添加活躍的課程，但不知何故，第一個活動課程每次都是活躍的。

2.）一旦我點擊標籤，如果我重新加載頁面，我得到以下錯誤，整個頁面似乎打破。網址回落到基本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> 

ROUTES

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: ''是未定義參數時的網址，這是您希望首先加載常規選項卡的路徑，因此您可以將其指向「常規選項卡」組件。

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 /」，你將被自動重定向到'/ 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' 
      } 
     } 
    ] 
}