默认情况下使第一个选项卡处于活动状态
我正在使用以下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'
}
}
]
}
]
}
];
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' } } ];
这不是在模板中完成的,而是在路由配置。
您需要在默认情况下重定向到您的一般标签:
{ 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'
}
}
]
}
所以,我拿一般标签我的路径看起来像下面的http://本地主机:8080 /#/租户/ 58a958f26226ba36904b9e71/dataconfiguration/58a959616226ba36904b9e72/- 数字是动态的。现在您的建议路径可以从我想要重定向的位置看到空白。 –
使用redirectPath,这意味着当你转到页面“/ tenant/12345”时,你将被自动重定向到“/ tenant/12345/general”。现在你已经添加了路线,我会更新我的答案。 –
我也放了路由表。我应该在哪里把所有的(*) –