Question

如何在@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>

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

谢谢！

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

重定向＆＃34;无效＆＃34;网址。

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

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

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

Answer 4

我面临同样的问题应用所有可能的解决方案，但最终解决了我的问题

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

希望这会对你有所帮助。

Answer 5

使用当前版本的角度2，您无法使用＆＃39; /＆＃39;在路径上或给你的路线命名。你可以做的是创建一个路由文件，如＆＃34; app.routes.ts＆＃34;并导入您的组件，确保导入时的路径。

                    string str =("\n" + attRef.TextString);

                    mtext.Contents = "\n" + str;

                    ed.WriteMessage(str);

                    btr.AppendEntity(mtext);

                    tr.AddNewlyCreatedDBObject(mtext, true);
                }
            }
            tr.Commit();
        }
        catch (Autodesk.AutoCAD.Runtime.Exception ex)
        {
            ed.WriteMessage(("Exception: " + ex.Message));
        }
        finally
        {
            tr.Dispose();
        }
    }
}

添加：

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

在你的main.ts导入export const APP_ROUTER_PROVIDERS = [ provideRouter(routes)]并添加bootstrap路由器提供程序到main.ts，如下所示：

APP_ROUTER_PROVIDERS

最后，您的链接将如下所示：

bootstrap(AppComponent,[APP_ROUTER_PROVIDERS]);

Answer 6

只需要在路线中添加其他参数，参数为useAsDefault：true。例如，如果您希望将DashboardComponent作为默认值，则需要执行以下操作：

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

我建议你为路线添加名字。

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

Answer 7

路径应留空以使其成为默认组件。

{ path: '', component: DashboardComponent },

Answer 8

假设你想在加载时加载 RegistrationComponent ，然后在某些事件上加载 ConfirmationComponent ，请点击 RegistrationComponent 。

所以在appModule.ts中，你可以这样写。

RouterModule.forRoot([
      { 
        path: '', 
        redirectTo: 'registration', 
        pathMatch: 'full'
       },
       { 
        path: 'registration', 
        component: RegistrationComponent
       },
      {
        path : 'confirmation',
        component: ConfirmationComponent
      }
    ])

OR

RouterModule.forRoot([
       { 
        path: '', 
        component: RegistrationComponent
       },
      {
        path : 'confirmation',
        component: ConfirmationComponent
      }
    ])

也没关系。选择你喜欢的任何东西。

Answer 9

根据文档，您应该

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

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

Answer 10

我只是遇到了同样的问题，设法使它可以在我的机器上工作，但是我所做的更改与文档中提到的方式不同，因此可能是角度版本路由模块的问题，我的是角度7

仅当我将延迟模块主路由输入路径更改为与app-routes.ts中配置的路径相同时，它才起作用

routes = [{path:'', redirectTo: '\home\default', pathMatch: 'full'},
           {path: '', 
           children: [{
             path:'home',
             loadChildren :'lazy module path'      
           }]

         }];

 routes configured at HomeModule
 const routes = [{path: 'home', redirectTo: 'default', pathMatch: 'full'},
             {path: 'default', component: MyPageComponent},
            ]

 instead of 
 const routes = [{path: '', redirectTo: 'default', pathMatch: 'full'},
                   {path: 'default', component: MyPageComponent},
                ]

Answer 11

将路线添加到默认页面

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

然后在着陆页上添加以下脚本。

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

Angular2路由器（@ angular / router），如何设置默认路由？

11 个答案: