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

Question

我正在使用以下 html sn-p。

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

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

要回答您的第一个问题，要使常规选项卡始终成为默认选项卡，您可以将“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，这是您希望首先用来加载常规选项卡的路径，因此您可以将其指向“常规选项卡”组件。

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

Answer 2

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

您需要默认重定向到您的常规选项卡：

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

在您的情况下，这意味着当您导航到“/tenant/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'
            }
        }
    ]
}