如何在angularjs中設置路由以使其脫離動態路由？

Question

您要實現的目標是從路由/:userId/到路由/:userId/details/ 。 當我在/:userId'路線上時，該用戶向我出現。 單擊用戶后如何進入/:userId/details/ ？ 在瀏覽器欄中手動鍵入時，可以使用示例'/：userId / details /'。

user / user.html

<h3>An user!</h3>

<div>
    <div>Name: <a ui-sref="users({ userId: user.id })/albums" href='#' >
                  {{$ctrl.user.name}}
               </a>
    </div>
    <div>Id: {{$ctrl.user.id}}</div>
</div>

用戶/user.js

let userModule = angular.module('user', [
  uiRouter
])

.config(($stateProvider) => {
  "ngInject";
  $stateProvider
    .state('user', {
      url: '/{userId}/',
      component: 'user',
      resolve: {
          user: function(UserService, $stateParams) {
              return UserService.getUser($stateParams.userId);
          }
      }
    });
})

details-list / details-list.js

.config(($stateProvider) => {
  "ngInject";
  $stateProvider
    .state('detailsList', {
      url: '/{userId}/details',
      component: 'detailsList',
      resolve: {
          albums: function(DetailsListService, $stateParams) {
              return 
  DetailsListService.getAlbums($stateParams.userId);
         }
      }
    });
})

export default detailsListModule;

details-list / details-list.controller.js

class DetailsListController {
    constructor($stateParams) {
      'ngInject'

      this.userId = $stateParams.userId;

    }
}

Answer 1

由於所需狀態的名稱為detailsList ，因此可以使用：

<div>Name: a̶ ̶u̶i̶-̶s̶r̶e̶f̶=̶"̶u̶s̶e̶r̶s̶(̶{̶ ̶u̶s̶e̶r̶I̶d̶:̶ ̶u̶s̶e̶r̶.̶i̶d̶ ̶}̶)̶/̶a̶l̶b̶u̶m̶s̶"̶ ̶h̶r̶e̶f̶=̶'̶#̶'̶ 
           <a ui-sref="detailsList({ userId: $ctrl.user.id })" >
              {{$ctrl.user.name}}
           </a>
<div>Id: {{$ctrl.user.id}}</div>

有關更多信息，請參見

UI路由器快速參考-ui-sref