Question

设置状态是为了允许通过将父解析条目注入子进程来重用，除了创建新的包实例之外，所有这些都有效。我无法弄清楚如何确定dashboard.package状态是转换到的实际状态。即使出现了针对子状态的第二个参数，只有一个出现在$ state.params中，所以我无法检查isUndefined并知道dashboard.package是状态。

状态的逻辑是，如果没有第二个参数，则不存在文档，需要创建新实例，否则状态为编辑，实例存在。

// Parent dashboard
.state('dashboard', {
    url: "/dashboard",
    abstract: true,
    templateUrl: '/app/dashboard.html',
    resolve: {
        UserAuth: ...,
        GetPackageTypes: ...
    }
}

  // Parent dashboard package
  .state('dashboard.package', {
      url: "/package/:packageInstance",
      templateUrl: '/app/dashboard/views/package.html',
      controller: 'PackageController',
      controllerAs: 'packageCtrl',
      resolve: {
          GetPackageType: [function(){

              // HTTP request for package type 
          }],
          CreatePackage: ['$state', '$stateParams', 'GetPackageType', 
                function($state, $stateParams, GetPackageType){

              // ISSUE: Determine if dashboard.package is the actual state???
              // if it is then create new package instance, otherwise will drop 
              // into dashboard.package.edit and package instance will be used

              // Example URL for this state: #/dashboard/package/type

              // Even if both params exist only see one here so no good
              console.log("state.params = ", $state.params);

              // Shows previous state name so no good
              console.log("state.current = ", $state.current);
              console.log("state.current.name = ", $state.current.name);
              console.log("state.$current.self.name = ", $state.$current.self.name);

              // Returns false so no good
              console.log("$state.is = ", $state.is('dashboard.package') );
              console.log("$state includes = ", $state.includes('dashboard.package') );
          }]
      }
  }

    // Child dashboard package
    .state('dashboard.package.edit', {
        url: "/edit/:packageInstanceId",
        templateUrl: '/app/dashboard/views/package.html',
        controller: 'PackageController',
        controllerAs: 'packageCtrl',
        resolve: {
            GetPackageInstance: ['$state', '$stateParams', 'GetPackageType', 
                function($state, $stateParams, GetPackageType){

                // HTTP request for package instance uses package type

                // Example URL for this state: #/dashboard/package/type/edit/3858
            }],
        }
    }

替代解决方案

为了避免浪费时间试图解决这个问题，或者将一些时髦的工作放在一起，这可能会在将来的更新中失败，我最终创建了第二个抽象状态dashboard.package，包含我的所有控制器，templateUrl和初始解析使用包类型的单个参数，并将创建包拆分为与dashboard.package.edit相同级别的单独状态dashboard.package.create。如果有任何有用的话，效果很好，没有头痛。

// Parent dashboard
.state('dashboard', {
    url: "/dashboard",
    abstract: true,
    templateUrl: '/app/dashboard.html',
    resolve: {
        UserAuth: ...,
        GetPackageTypes: ...
    }
}

.state('dashboard.package', {
            url: "/package/:packageType",
            abstract: true,
            templateUrl: '/app/dashboard/views/package.html',
            controller: 'PackageController',
            controllerAs: 'packageCtrl',
            resolve: { 
                GetPackage: // injecting parent GetPackageTypes and using parameter
            }
}

.state('dashboard.package.create', {
    url: "",
    resolve: { 
        CreatePackage: // injecting parent GetPackage
    }
}

.state('dashboard.package.edit', {
    url: "/edit/:packageinstance",
    resolve: { 
        GetPackageInstance: // injecting parent GetPackage and using parameter
    }
}

Answer 1

//$state.current.name will have either name of parent or child.
resolve: {
  isChild: function($state, STATES) {
    return $state.current.name === STATES.CHILD_NAME;
  }
}

UI-Router如何将解析条目中的当前状态确定为父状态或子状态

1 个答案: