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.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中设置路由以使其脱离动态路由？

1 个答案: