Question

我正在开发Angular 7应用程序。

这是 routes.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页面。我该如何解决？

请告知

Answer 1

这显然取决于您的路线配置以及将用户导航到特定路线的确切位置。

例如，如果您在订单组件中，并且想要将用户导航到orders/:id路线，则可以执行以下操作：

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>

请仔细注意此语法与我们在orders组件中用于路由的语法之间的区别。在这两个组件中建立相对性的方式上都有细微的差异。

希望这可以帮助您更好地理解整个问题。

这是您推荐的Working Sample StackBlitz。

Angular 2+路由器导航问题

1 个答案: