Question

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

1。）默认情况下，如何激活常规选项卡。我尝试添加活动类，但不管怎样，第一个只是每次都有效。

2.。）一旦我点击选项卡，如果我重新加载页面，我得到以下错误，整个页面似乎打破。网址落回基本网址

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'，并且路由将加载路由器插座中的正确组件。

编辑：你的路由配置似乎有问题，你重新定义：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

更新： 使用路线示例进行了更新，以解决答案评论。

要回答您的第一个问题，要使常规标签始终为默认标签，您可以将“捕捉所有（*）”路线设置为指向“常规”标签组件。

请参阅此处了解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' } } ];

默认情况下，将第一个标签设为有效

2 个答案: