Angular UI路由器：如何使用不同的$stateParam进入相同的状态？

Question

我想知道如何才能进入相同的状态，但 $stateParam？

我试着去：

$state.go('^.currentState({param: 0})')

但是，它不起作用。

Answer 1

参数是 go() 方法的第二个参数

$state.go('^.currentState', {param: 0})

go(to, params, options)

Convenience method for transitioning to a new state. $state.go calls $state.transitionTo internally but automatically sets options to { location: true, inherit: true, relative: $state.$current, notify: true }. This allows you to easily use an absolute or relative to path and specify only the parameters you'd like to update (while letting unspecified parameters inherit from the currently active ancestor states).

Answer 2

如果您想重新加载状态，也可以使用 ui-sref-opts。传入 reload: true 选项，将重新加载当前状态。

<a ui-sref-opts="{reload:true}" ui-sref="app.post.applicants">Applicants</a>

Answer 3

就我而言，我想重新加载相同的状态，但使用不同的参数。（null 在此特定事件中）

情况如下：我们有一个不同公司的网站，每个公司都有自己的品牌页面。您可以访问其他公司的页面，并且有一个菜单条目可以快速访问您自己的页面。

一家公司的页面位于/company/somecompanyid下，而您自己的页面将在访问/company时加载。不加id。或代码中的company_id: null。

问题
当您查看随机公司的页面时，假设 company/123456 并单击指定的菜单条目访问您自己的页面，什么也不会发生！
Ui-router 相信你在同一条路线上，只是让你在那里。

解决方法
将以下内容添加到您的模板中：
<a ui-sref="company" ui-sref-opts="{reload: true, inherit: false}" ... ></a>

它有什么作用？
reload: true 这将强制您的状态重新加载。但它会复制您当前的路线参数。这意味着您仍然看到其他公司的页面。

inherit: false 将 inherit 属性设置为 false 将强制 ui-router 使用您提供的参数。在我的例子中，companyId 是 null 并且加载了用户的个人页面。欢呼！

您可以在文档页面上找到所有 ui-sref-options。 ui-sref-options

Answer 4

您可能想使用这段代码：

<a ui-sref=".({param: 0})"></a>

无需使用控制器。

Answer 5

最简单的解决方案是 ->

您可以使用相同的控制器和相同的 html 页面创建 2 个状态，然后一个一个地重定向

优点：无需处理回溯历史，所有工作都非常顺畅

  .state('app.productDetails', {
         url: '/productDetails',
         cache: false,
         views: {
             'menuContent': {
                 templateUrl: 'src/products/productDetails/productDetails.html',
                 controller: 'ProductDetailsCtrl'
             }
         },
         params: {
             productID: 0,
             modelID: 0
         }
     })

    .state('app.modelDetails', {
        url: '/modelDetails',
        cache: false,
        views: {
            'menuContent': {
                templateUrl: 'src/products/productDetails/productDetails.html',
                controller: 'ProductDetailsCtrl'
            }
        },
        params: {
            productID: 0,
            modelID: 0
        }
    })

Answer 6

$state.go('.', {param: someId});

Angular UI路由器：如何使用不同的$stateParam进入相同的状态？

Angular UI Router: How to go to the same state with different $stateParam?

state

angularjs

angular-ui-router

go(to, params, options)