Angular 2+路由器导航问题

Question

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

这里是routes.module.ts文件

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

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

当我在订单页面上单击 'edit order' 按钮时，它会导航到 OrdersEditComponent 并选择了 orderId。

顺序-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 中像这样导航用户 Class:

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>

请仔细注意此语法与我们在订单组件中用于路由的语法之间的区别。在这两个组件中建立相对论的方式存在细微差别。

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

Here's a Working Sample StackBlitz for your ref.

Angular 2+路由器导航问题

Angular 2+ router navigation issue

angular

typescript

angular-ui-router