Angular2路由器(@ angular/router),如何设置默认路由？

Question

如何在@Routes路径元数据集合中设置默认路由？如果使用@ angular/router-deprecated中的angular2路由器,则在@routeConfig对象中定义路由,该对象是路由对象的集合,但这些路由对象具有更多属性.例如,它们具有'name'和'useAsDefualt'属性,而从@ angular/router定义的路由则没有.我想用新路由器编写我的新应用程序,但是如何使用新路由器并设置默认路由？

这是我的主要app组件,它定义了我的路线:

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>

它转换到相关的路线.我唯一的问题是,当我的应用程序加载时,它没有活动的路由.如何定义我的应用程序引导时处于活动状态的默认路由？

谢谢!

Answer 1

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(vladivostok)

使用路径/和redirectTo

RouterConfig = [
  { path: '/', redirectTo: 'heroes', terminal: true },
  { path: 'heroes', component: HeroComponent,
    children: [
      { path: '/', redirectTo: 'detail', terminal: true },
      { path: 'detail', component: HeroDetailComponent }
    ] 
  }
];

RC.1 @ angular/router

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);
  }
}

Answer 2

你设置路线的路径是''.DashboardComponent的示例首先加载.

@Routes([
        { path: '', component: DashboardComponent },
        { path: '/ConfigManager', component: ConfigManagerComponent },
        { path: '/Merge', component: MergeComponent },
        { path: '/ApplicationManagement', component: ApplicationMgmtComponent }
])

希望它对你有所帮助.

Answer 3

根据文档你应该只是

{ path: '**', component: DefaultLayoutComponent }

在您的 app-routing.module.ts 源上：https ://angular.io/guide/router

Answer 4

在Angular 2+中,您可以通过将此路由添加到路由模块来将路由设置为默认页面.在这种情况下,登录是我的默认页面的目标路由.

{path:'',redirectTo:'login', pathMatch: 'full' },