Проблема маршрутизации с Angular 5 и router.navigate - PullRequest
Новая
       11

Проблема маршрутизации с Angular 5 и router.navigate

0 голосов
/ 29 июня 2019 
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

Есть идеи?

Спасибо

1 Ответ

0 голосов
/ 29 июня 2019

Вы получили плохую маршрутизацию, она должна выглядеть так:

в app.routing. 

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

в dashboard.routing.ts 

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

в customer.routing.ts 

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:

в AdminLayoutComponent.html: 

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

в AppComponent.html: 

<app-admin-layout>
<router-outlet></router-outlet>
</app-admin-layout>
...