javascript - angularjs ui-router父状态，参数在子状态后加载

Question

我有一个父状态和一个子状态。父状态用于查看/编辑客户，子状态用于创建。如果父状态没有参数，它们都可以正常加载:

.state('crm.customer', {
    url: 'crm/customers/',
    templateUrl: 'src/modules/crm/views/customer.html',
    controller: 'customersController'
})
.state('crm.customer.create', {
    url: 'crm/customers/create',
    templateUrl: 'src/modules/crm/views/customer.html',
    controller: 'customersController'
})

当我将 customerId 参数添加到父状态并加载子状态时，首先加载子状态，然后立即切换到父状态:

.state('crm.customer', {
    url: 'crm/customers/:customerId',
    templateUrl: 'src/modules/crm/views/customer.html',
    controller: 'customersController'
})
.state('crm.customer.create', {
    url: 'crm/customers/create',
    templateUrl: 'src/modules/crm/views/customer.html',
    controller: 'customersController'
})

如何防止子状态加载后父状态加载？

Answer 1

发生这种情况是因为当您访问 /crm/customers/create 时，两个状态 URL 都匹配。为了解决这个问题，定义param的类型。根据documentation ，有多种方法可以在 url 中定义参数，其中之一是使用大括号:'/user/{id:int}'。

根据您的情况，请使用

.state('crm.customer', {
  url: 'crm/customers/{customerId:int}',
  templateUrl: 'src/modules/crm/views/customer.html',
  controller: 'customersController'
})

这样 /crm/customers/create 将仅匹配子项的状态。