Angular 2+ роутер проблема с навигацией - PullRequest
Новая
       53

Angular 2+ роутер проблема с навигацией

1 голос
/ 28 октября 2019

Я разрабатываю приложение Angular 7.

Вот файл rout.module.ts 

const routes: Routes = [{
  path: '',
  component: EnforcementComponent,

  children: [{
    path: 'orders',
    children: [{
        path: '',
        component: OrdersComponent
      },
      {
        path: ':id',
        component: OrdersEditComponent,
      }
    ]
  }]
}];

Когда я нахожусь на странице заказов инажмите на кнопку «Изменить порядок», она перейдет к OrdersEditComponent с выбранным orderId.

order-edit.component.ts 

goToOrderDetails(order: Order) {
  this.router.navigate([`home/enforcement/orders/${order.id}`]);
}

Это работает нормально.

Но когда я непосредственно перехожу на URL, т.е. когда я печатаю на панели браузера - home/enforcement/orders/101, он возвращает меня на страницу home/enforcement/orders. Как я могу это исправить?

Пожалуйста, сообщите

1 Ответ

2 голосов
/ 28 октября 2019

Это будет явно зависеть от конфигурации вашего маршрута и от того, где именно вы перемещаете пользователя по определенному маршруту.

Например, если вы входили в компонент заказов и хотели перейти пользователя к orders/:id route, вы бы сделали что-то вроде этого: 

constructor(private router: Router, private route: ActivatedRoute) {}

goToOrderDetails(order) {
  this.router.navigate([`home/enforcement/orders/${order.id}`]);
}

goToOrderDetailsRelative(order) {
  this.router.navigate([order.id], { relativeTo: this.route });
}

Если бы вы перемещались по шаблону, вы бы сделали что-то вроде этого: 

<p>Orders Component!</p>
<button 
  (click)="goToOrderDetails({ id: 1 })">
  Go To Order #1 Via Absolute
</button> | 
<button 
  (click)="goToOrderDetailsRelative({ id: 1 })">
  Go To Order #1 Via Relative
</button> | 
<a routerLink="./1">
  Go To Order #1 Via Relative Router Link
</a>

Обратите внимание, как мыустанавливаем эту относительность здесь. Поскольку пользователь уже будет на маршруте orders.

Так как вы должны делать это в компоненте редактирования заказа, вы должны перемещаться по пользователю, как это в классе TypeScript: 

constructor(private router: Router, private route: ActivatedRoute) {}

goToOrderDetails(order) {
  this.router.navigate([`home/enforcement/orders/${order.id}`]);
}

goToOrderDetailsRelative(order) {
  this.router.navigate([order.id], { relativeTo: this.route.parent });
}

Или, если вы хотите сделать это в шаблоне, вы можете попробовать это: 

<p>Orders Edit Component!</p>

<button 
  (click)="goToOrderDetails({ id: 2 })">
  Go To Order #2 Via Absolute
</button> | 
<button 
  (click)="goToOrderDetailsRelative({ id: 2 })">
  Go To Order #2 Via Relative
</button> | 
<a routerLink="../2">
  Go To Order #2 Via Relative Router Link
</a>

Внимательно обратите внимание на разницу между этим синтаксисом и тем, который мы использовали длямаршрутизация в компоненте заказов. Существуют тонкие различия в способах установления относительности в обоих этих компонентах.

Надеюсь, это поможет вам лучше понять всю проблему.

Вот Рабочий образец StackBlitz для вашей ссылки.

...