Angular2 маршрутизатор (@angular/router), как установить маршрут по умолчанию?

Как настроить маршрут по умолчанию в моей коллекции метаданных маршрута @Routes? Если вы используете маршрутизатор angular2 от @angular/router-debrecated, вы определяете маршруты в объекте @routeConfig, который представляет собой набор объектов маршрута, но эти объекты маршрута имеют больше атрибутов. Например, они имеют атрибуты "имя" и "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>

Переходит на связанный маршрут. Моя единственная проблема заключается в том, что когда приложение загружается, у него нет активного маршрута. Как определить маршрут по умолчанию, который активен, когда загружается мое приложение?

Спасибо!

Ответ 1

V3-beta.2

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' },

который перенаправляет "недопустимые" URL-адреса.

V3-alpha (владивосток)

Использовать путь / и redirectTo

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

RC.1 @ angular/маршрутизатор

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

Ответ 2

Вы задаете путь маршрута ''. Пример для DashboardComponent сначала загружается.

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

Надеюсь, он вам поможет.

Ответ 3

В Angular 2+ вы можете установить маршрут по умолчанию, добавив этот маршрут в свой модуль маршрута. В этом случае login - это мой целевой маршрут для страницы по умолчанию.

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

Ответ 4

В текущей версии angular 2 вы не можете использовать '/' на пути или указать имя для своего маршрута. Что вы можете сделать, так это создать файл маршрута типа "app.routes.ts" и импортировать ваши компоненты, убедитесь в том, что путь при импорте.

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 {RouterConfig, provideRouter } from '@angular/router';

Затем ваши маршруты:

const routes:RouterConfig = [      
    { path: 'Dashboard', component: DashboardComponent },
    { path: 'ConfigManager', component: ConfigManagerComponent },
    { path: 'Merge', component: MergeComponent },
    { path: 'ApplicationManagement', component: ApplicationMgmtComponent }
 ];

Затем экспортируйте:

export  const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)]

В вашем main.ts import APP_ROUTER_PROVIDERS и добавьте загрузку провайдеров маршрутизатора в main.ts следующим образом:

bootstrap(AppComponent,[APP_ROUTER_PROVIDERS]);

Наконец, ваша ссылка будет выглядеть так:

li class="nav hidden-xs"><a [routerLink]="['./Dashboard']" routerLinkActive="active">Dashboard</a>/li>

Ответ 5

Только вам нужно добавить другой параметр в свой маршрут, параметр useAsDefault: true. Например, если вы хотите, чтобы DashboardComponent по умолчанию вам нужно было сделать это:

@RouteConfig([
    { path: '/Dashboard', component: DashboardComponent , useAsDefault:true},
    .
    .
    .
    ])

Я рекомендую вам добавлять имена к вашим маршрутам.

{ path: '/Dashboard',name:'Dashboard', component: DashboardComponent , useAsDefault:true}

Ответ 6

Я столкнулся с такой же проблемой, применяя все возможные решения, но, наконец, это решает мою проблему

export class AppRoutingModule {
constructor(private router: Router) {
    this.router.errorHandler = (error: any) => {
        this.router.navigate(['404']); // or redirect to default route
    }
  }
}

Надеюсь, это поможет вам.

Ответ 7

Путь должен быть пустым, чтобы сделать его компонентом по умолчанию.

{ path: '', component: DashboardComponent },

Ответ 8

Добавить маршрут на страницу по умолчанию

 $routeProvider
     .when("/db", {
         templateUrl: "/home/dashboard"
     })

Затем на целевой странице добавьте следующий script.

 $( document ).ready() 
 {
    window.location = "/#!db";
 };