Угловая маршрутизация со страницами следующих параметров - PullRequest
Новая
       27

Угловая маршрутизация со страницами следующих параметров

0 голосов
/ 01 февраля 2019

У меня есть приложение Angular 5, в котором мне нужен URL-адрес для использования следующей формы: 

www.example.com/#/company/<companyId>/transactions

Я использую розетку без имени <router-outlet></router-outlet>

CompanyIdэто параметр.Сначала я остановил часть транзакций в маршрутизаторе и убедился, что могу правильно добраться до страницы транзакций, связанной с CompanyTransactionsComponent.

Правило маршрутизатора: 

www.example.com/#/company/<id>/
{ path: 'company/:companyId', component: CompanyTransactionsComponent }
this.router.navigateByUrl('/company/' + user.companyId);

, которое работало нормально, нокогда я изменил на add / Transactions: 

www.example.com/#/company/<id>/transactions/
{ path: 'company/:companyId/transactions', component: CompanyTransactionsComponent }
this.router.navigateByUrl('/company/' + user.companyId + '/transactions/');

Это выдало мне ошибку Cannot match any routes., поэтому я попробовал несколько других вариантов ниже: 

{ 
    path: 'company/:companyId', 
    component: CompanyTransactionsComponent,
    children: [
        {
            path: 'transactions',
            component: CompanyTransactionsComponent
        }
    ]
},

и: 

RouterModule.forRoot([
    { path: 'company/:companyId', component: CompanyTransactionsComponent }
],
RouterModule.forChild([
    { 
        path: 'company/:companyId',
        children: [
            {
                path: 'transactions',
                component: CompanyTransactionsComponent
            }
        ]
    },
])

Оба выдают одну и ту же ошибку.Кажется, это происходит только потому, что я использую / транзакции после параметра /: companyId.Любая идея, как я могу добиться, чтобы подстраница следовала за параметром в URL?

EDIT CompanyTransactionsComponent используется как для родителя, так и для ребенка, потому что еще нет CompanyHomeComponent, поэтому транзакциистраница будет страницей по умолчанию, когда никакая подстраница не введена.Есть несколько дочерних элементов, кроме компонента CompanyTransactions, который я оставил, чтобы сократить код.

Ответы [ 2 ]

0 голосов
/ 01 февраля 2019

Какова цель «подстраницы», если вы маршрутизируете к тому же компоненту?

Этот код позволит вам иметь маршрут с дополнительным текстом в URL.Но если вы действительно хотите иметь «подстраницу», она должна перенаправить на другой компонент для отображения этой «подстраницы». 

{ 
    path: 'company/:companyId', 
    component: CompanyTransactionsComponent,
    children: [
        {
            path: 'transactions',
            component: CompanyTransactionsComponent  //<-- This should be the "sub page"
        }
    ]
},

Кроме того, при определении свойства children каку вас есть выше, вы обычно добавляете второй <router-outlet></router-outlet> в шаблон «родительского» компонента.В этом примере это будет шаблон CompanyTransactionsComponent.

Если вам не нужно отображать другой маршрут, то это должно быть сделано: 

{ 
    path: 'company/:companyId/transactions', 
    component: CompanyTransactionsComponent,
},
0 голосов
/ 01 февраля 2019

transactions как дочерний маршрут должен работать.Поскольку совпадение пути всегда является остатком от URL. 

const appRoutes: Routes = [{
    path: 'company/:companyId',
    component: CompanyTransactionsComponent,
    children: [
      {
        path: 'transactions',
        component: CompanyTransactionsComponent
      }
    ]
  }];

  @NgModule({
    imports: [
      RouterModule.forRoot(
        appRoutes,
      )
      // other imports here
    ],
  })
...