通过Angular编程重定向到特定路线

时间:2019-06-08 20:10:05

标签: angular angular2-routing

在app.routing中:

export const AppRoutes: Routes = [{
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full',
      },{
        path: '',
        component: AdminLayoutComponent,
        children: [{
            path: '',
            loadChildren: './moduleDashboard/dashboard.module#DashboardModule'
        },{
            path: 'client',
            loadChildren: './moduleCustomer/customer.module#CustomerModule'
        }]
];

在CustomerRoutes中:

export const CustomerRoutes: Routes = [{
    path: '',
        children: [ {
            path: 'clil',
            component: CustomerListComponent
        },{
            path: 'clie',
            component: CustomerAddComponent
        },{
            path: 'clie/:customerReference',
            component: CustomerAddComponent         
        }]
    }];

在组件上,当我单击它时,我有一个按钮,希望将其重定向到带有参数的特定路径。

我尝试了这些解决方案

this.router.navigate(['client/clie/', 1900001])

this.router.navigate(['client/clie/', 1900001], {relativeTo: this.route});

但是我一直都重定向到/dashboard而不是/client/clie/1900001

有什么主意吗?

谢谢

2 个答案:

答案 0 :(得分:0)

不应将仪表板延迟加载,它是初始页面。您必须加载一些页面才能懒惰。

    export const AppRoutes: Routes = [
      {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full',
      }, 
      {
       path: 'dashboard',
       component: DashboardComponent
      }, 
      {
        path: '',
        component: AdminLayoutComponent,
        children: [{
            path: 'client',
            loadChildren: './moduleCustomer/customer.module#CustomerModule'
        }]
];

这可能有效。尝试一下。顺便说一下,我不是亲自运行这段代码。

答案 1 :(得分:0)

尝试一下:

export const AppRoutes: Routes = [{
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full',
      },{
        path: 'dashboard',
        component: AdminLayoutComponent,
        children: [{
            path: '',
            loadChildren: './moduleDashboard/dashboard.module#DashboardModule'
        },{
            path: 'client',
            loadChildren: './moduleCustomer/customer.module#CustomerModule'
        }]
];