如何在我的@Routes路由元数据集合中设置默认路由?如果你使用@angular2路由器,你可以在@routeConfig对象中定义路由,这是一个路由对象的集合,但是这些路由对象有更多的属性。例如,它们有“名称”和“useAsDefualt”属性,而@angel2/router定义的路由没有。我想使用新路由器编写我的新应用程序,但是我如何使用新路由器并设置默认路由?
这是我的主端组件,它定义了我的路由:
import { Component } from '@angular/core';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ConfigManagerComponent } from './configManager/configManager.component';
import { ApplicationMgmtComponent } from './applicationMgmt/applicationMgmt.component';
import { MergeComponent } from './merge/merge.component';
import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
@Component({
selector: 'app-container',
templateUrl: 'app/app.component.html',
directives: [ROUTER_DIRECTIVES]
})
@Routes([
{ path: '/Dashboard', component: DashboardComponent },
{ path: '/ConfigManager', component: ConfigManagerComponent },
{ path: '/Merge', component: MergeComponent },
{ path: '/ApplicationManagement', component: ApplicationMgmtComponent }
])
export class AppComponent { }
当我点击像这样的锚标签时,路由定义似乎工作得很好:
<li class="nav hidden-xs"><a [routerLink]="['./Dashboard']">Dashboard</a>/li>
它转换到关联的路由。我唯一的问题是,当我的应用程序加载时,它没有活动的路由。如何定义在我的应用程序引导时处于活动状态的默认路由?
谢谢!
V2.0.0及更高版本
参见也参见https://angular.io/guide/router#the-default-route-to-heroes
RouterConfig = [
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: 'heroes', component: HeroComponent,
children: [
{ path: '', redirectTo: '/detail', pathMatch: 'full' },
{ path: 'detail', component: HeroDetailComponent }
]
}
];
还有包罗万象的路线
{ path: '**', redirectTo: '/heroes', pathMatch: 'full' },
重定向“无效”网址。
V3-alpha(海参崴)
使用路径/
和重定向到
RouterConfig = [
{ path: '/', redirectTo: 'heroes', terminal: true },
{ path: 'heroes', component: HeroComponent,
children: [
{ path: '/', redirectTo: 'detail', terminal: true },
{ path: 'detail', component: HeroDetailComponent }
]
}
];
RC.1@角/路由器
RC路由器还不支持useAsDefault
。作为一种解决方法,您可以明确导航。
在根组件
export class AppComponent {
constructor(router:Router) {
router.navigate(['/Merge']);
}
}
为其他组件
export class OtherComponent {
constructor(private router:Router) {}
routerOnActivate(curr: RouteSegment, prev?: RouteSegment, currTree?: RouteTree, prevTree?: RouteTree) : void {
this.router.navigate(['SomeRoute'], curr);
}
}
您设置的路由路径是“。仪表板组件的示例是先加载。
@Routes([
{ path: '', component: DashboardComponent },
{ path: '/ConfigManager', component: ConfigManagerComponent },
{ path: '/Merge', component: MergeComponent },
{ path: '/ApplicationManagement', component: ApplicationMgmtComponent }
])
希望对你有帮助。
在Angular 2中,您可以通过将此路由添加到路由模块来设置路由到默认页面。在这种情况下,登录是我的默认页面的目标路由。
{path:'',redirectTo:'login', pathMatch: 'full' },