Question

I have this structure :
- src
    |
    |- app
        |
        |- moduleDashboard
        |   |
        |   |- DashboardComponent
        |   dashboard.routing.ts
        |
        |- moduleCustomer
            |
            |- CustomerListComponent
            |- CustomerAllDetailComponent
            customer.routing.ts         
        app.routing.ts

in app.routing.ts
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'
        }]
        },{
            path: '',
            component: AuthLayoutComponent,
            children: [{
                path: 'pages',
                loadChildren: './pages/pages.module#PagesModule'
            }]
        }
];

in dashboard.routing.ts
export const DashboardRoutes: Routes = [{
    path: '',
    children: [ {
      path: 'dashboard',
      component: DashboardComponent
  }]
}];

in customer.routing.ts
export const CustomerRoutes: Routes = [{
    path: '',
        children: [ {
            path: 'clil',
            component: CustomerListComponent
        },{
            path: 'clid/:customerReference',
            component: CustomerAllDetailComponent                    
        }]
    }];

所有导航都工作正常，但是我想将customer-list.component.ts中的一个功能重定向到特定路径。我尝试了几种解决方案，但始终将我重定向到路径仪表板。

我尝试了以下解决方案：

    myFunction() {
//myCustomerReference variable contain 1900001
        this.router.navigate([`/client/clid/1900001}`]);
        this.router.navigate([`/client/clid/1900001`], {relativeTo: this.route});
        this.router.navigate(['client/clid/:customerReference', myCustomerReference], {relativeTo: this.route});
        this.router.navigate(['client/clid', 1900001], {relativeTo: this.route});
    }

更多，但我从未打过http://localhost:4200/client/clid/1900001

有什么想法吗？

谢谢

Answer 1

您的路由安排不正确，看起来应该像这样：

在应用路由中。

#include<stdio.h>
#include<stdlib.h>

int x = 45;
int sum = 1;
char str[17];

int main()
{
    for(int i = 0; i < 22; i++)
    {
            sum *= x;
            printf("%d in binary is %s\n", sum, itoa(sum, str, 2));
    }
    return 0
}

在dashboard.routing.ts

中

export const AppRoutes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', loadChildren: './moduleDashboard/dashboard.module#DashboardModule' },
  { path: 'customer', loadChildren: './moduleCustomer/customer.module#CustomerModule'}, // its an client or customer ?
  { path: 'pages', loadChildren: './pages/pages.module#PagesModule' }
  ];

在customer.routing.ts

export const DashboardRoutes: Routes = [
  { path: '', component: DashboardComponent }
];

这是export const CustomerRoutes: Routes = [ { path: '', component: CustomerComponent , children: [ // customerRoute have to have his own Component may be this is main problem. { path: 'clil', component: CustomerListComponent }, { path: 'clid/:customerReference', component: CustomerAllDetailComponent } ] }];是什么？如果没有自己的AdminLeyoutComponent，则将其粘贴到模板中作为path:。

如果您想通过<app-admin-leyout></app-admin-leyout>通过所有路线：

在AdminLayoutComponent.html中：

AdminLayoutComponent

在AppComponent.html中：

<div class="some-code">
<ng-content></ng-content>
</div>

Angular 5和router.navigate的路由问题

1 个答案: