[解決済み] Angular2ルータ(@angular/router)、デフォルトルートを設定する方法とは？

質問

Routes ルートメタデータ・コレクションにデフォルトルートを設定するにはどうしたらよいですか。 angular/router-deprecated にある angular2 ルータを使用する場合、ルートオブジェクトのコレクションである @routeConfig オブジェクトでルートを定義しますが、これらのルートオブジェクトにはより多くの属性があります。 例えば、'name' や 'useAsDefualt' 属性がありますが、@angular/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' },

これは、"invalid" URLをリダイレクトするものです。

V3-α (ウラジオストク)

使用パス / と 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);
  }
}