默认情况下使第一个选项卡处于活动状态

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' 
      } 
     } 
    ] 
}