如何使用AngularJS ui路由器構建與URL相同的URL <ui-sref> 在控制器而不是HTML中？

Question

我在我的web應用程序中使用AngularJS的ui-router。 我有一個看起來像這樣的狀態：

  $stateProvider.state('mystate',
    {
      url: '/mystate/{id:int}/:slug',
      params: {
        slug: {value: null, squash: true}
      },
      templateUrl: 'partials/mystate.html',
      controller: 'MyStateCtrl'
    }
  );

我可以這樣鏈接到此狀態：

<a ui-sref="mystate({id: 4, slug: 'myslug'})">Hello World</a>

它將其轉換為以下URL： /mystate/4/myslug/

我想構建ui-sref生成的相同URL，但是我想在MyStateCtrl它。 我怎么做？ 在控制器中，我可以訪問$stateParams.id和$stateParams.slug 。 但是我需要調用什么函數才能將它們轉換為該URL？

編輯 ：請注意：我不想轉到結果URL。 我只想擁有它供以后使用。

Answer 1

您可以將$ state注入MyStateCtrl的依賴項，並使用$state.go(to [, toParams] [, options])函數導航到目標URL。

例如：

class MainController {

  constructor($scope, $state) {
    'ngInject';

    this.scope = $scope;
    this.state = $state;

   }

   navigateToAState() {
     this.state.go('mystate',{id: 4, slug: 'myslug'})
   }
 }

 export default MainController;

詳細信息參考： $state.go(to \\[, toParams\\] \\[, options\\])

Answer 2

一種url生成方法，該方法返回填充有給定參數的給定狀態的已編譯url。

Example : expect($state.href("about.person", { person: "bob" })).toEqual("/about/bob");

你可以用這個

$state.href ('mystate',{id: 4, slug: 'myslug'});

請參閱此鏈接以獲取更多幫助

Answer 3

您可以像ui-sref一樣使用$state.href()函數構造一個url。 您只需要提供可以從$stateParams獲得的路線及其參數。

e.g. expect($state.href("about.person", { person: "bob" })).toEqual("/about/bob");

因此，在您的情況下：

$state.href("mystate", { id: $stateParams.id, slug: $stateParams.slug });

這是文檔- $ state.href（）