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

Question

我正在使用以下 html 片段。

1.) 如何使常规选项卡默认处于活动状态。我尝试添加活动 class 但不知何故第一个每次都只活动。

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

这不是在模板中完成的，而是在路由配置中完成的。

默认情况下您需要重定向到常规选项卡：

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

在你的情况下，这意味着当你导航到“/tenant/123/dataconfiguration/456/”时，你将被自动重定向到“/tenant/123/dataconfiguration/456/general”，并且路由将在你的router-outlet.

编辑：您的路由配置似乎有问题，您重新定义了: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'
            }
        }
    ]
}

Answer 2

更新： 更新了路由示例以解决对答案的评论。

要回答您的第一个问题，要使常规选项卡始终成为默认选项卡，您可以将“catch all( * )”路由设置为指向常规选项卡组件.

请参阅此处了解 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 当没有定义参数时，这是您希望用来首先加载常规选项卡的路径，因此您可以将其指向 'general tab'零件。

从技术上讲，path: '**' 路线是找不到路线时的全部，在这种情况下，我会转到错误页面。

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

您通过在其中嵌套子项使路由变得更加复杂。我建议先让您的路由使用平坦路径，然后再进行试验。 IE。需要注意的一件事，我使用了 Routes，而不是 Route[]（可能是同一件事，但如果仍然有，可以尝试改变问题）。

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

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

Make first tab active by default

angular

angular2-routing

angular2-template

angular2-forms

angular2-services