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

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

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

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

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

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

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

который работал нормально, но когда я добавил /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
            }
        ]
    },
])

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

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


angular parameters angular-router route-parameters routeparams
person kilkfoe    schedule 01.02.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

Этот код позволит вам создать маршрут с дополнительным текстом в 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,
},
person DeborahK    schedule 01.02.2019
comment
Позже мы добавим, скажем, CompanyHomeComponent, который будет родителем. Есть несколько детей, которых я оставил для простоты. Последний код, который вы указали, - это первое, что я попробовал, что побудило меня попробовать использовать атрибут детей. - person kilkfoe; 02.02.2019
comment
Этот последний синтаксис должен работать. Вы пробовали использовать this.router.navigate(['/company', user.companyId, 'transactions']); вместо navigationByUrl? - person DeborahK; 02.02.2019
comment
Кажется, это работает, поэтому я не пытался обновить страницу, что сработало бы все время. Но мне кажется странным, что this.router.navigateByUrl('/company/' + user.companyId + '/transactions/'); не работает - person kilkfoe; 06.02.2019
comment
На самом деле, обновление страницы не работает - я действительно думал, что это так, но когда я пытаюсь это сделать сейчас, он всегда выдает одну и ту же ошибку Cannot match any routes. URL Segment: 'company/<id>' - по какой-то причине в URL-адресе отсутствует /transactions. Я также понял, что в моих примерах URL-адресов, которые я предоставил, отсутствует хэш /#/, поэтому я отредактировал вопрос, добавив его в - person kilkfoe; 08.02.2019
comment
Можете ли вы создать простой стек-блиц, демонстрирующий вашу ошибку с минимальным объемом кода? - person DeborahK; 08.02.2019

arrow_upward
0
arrow_downward

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

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

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