如何将 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/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-Router Quick Reference - ui-sref

如何将 angularjs 中的路线设置为从动态路线出发？

How can I set routes in angularjs to go from a dynamic route?

javascript

angularjs

angular-ui-router