无法解析状态“home.app.detail”;从state "home.apps.list"

could not resolve state "home.app.detail" from state "home.apps.list", UI-Router

本文关键字：home quot list apps state detail 状态 app      更新时间：2023-09-26

我有一个页面显示的应用程序列表，我希望能够去到应用程序的详细信息的页面，当我点击其中的每一个。下面是我的配置:

module bandar {
  'use strict';
  export class RouterConfig {
    /** @ngInject */
    constructor($stateProvider: ng.ui.IStateProvider,
                $urlRouterProvider: ng.ui.IUrlRouterProvider,
                $locationProvider: ng.ILocationProvider) {
      $stateProvider
        .state('home', {
          url: '',
          abstract: true,
          templateUrl: 'app/components/main/main.html',
          controller: 'MainController',
          controllerAs: 'mainCtrl'
        })
        .state('home.apps', {
          url: '/apps',
          abstract: true,
          templateUrl: 'app/components/apps/apps.html',
          controller: 'AppsController',
          controllerAs: 'appsCtrl',
        })
        .state('home.apps.list', {
          url: '',
          templateUrl: 'app/components/apps/list.html',
        })
        .state('home.app.detail', {
          url: '/app/:package_name',
          templateUrl: 'app/components/apps/app.html',
          controller: 'AppController',
          controllerAs: 'appCtrl',
        });
      $urlRouterProvider.otherwise('/apps');
      /*$locationProvider.html5Mode(true).hashPrefix('');*/
    }
  }
}

下面是列表模板的一部分，它锚定到应用程序的详细信息页面:

<a ui-sref="home.app.detail({package_name: app.package_name})">{{app.title}}</a>

但是当我在浏览器中点击它时，在控制台中出现以下错误:

Error: Could not resolve 'home.app.detail' from state 'home.apps.list'
    at Object.transitionTo (angular-ui-router.js:3140)
    at Object.go (angular-ui-router.js:3068)
    at angular-ui-router.js:4181
    at angular.js:17682
    at completeOutstandingRequest (angular.js:5387)
    at angular.js:5659

我猜问题是UI-Router认为我指的是相对的状态，但我想用绝对的方式来做

问题是父名 'home.app' 而不是 'home.apps' 

// wrong
.state('home.app.detail', { ...
// should be
.state('home.apps.detail', { ...

因为父元素是

.state('home.apps', { ...

EXTEND在这种情况下，它不应该是'home '的子元素。Apps ' we have to options

1)不继承

.state('detail', { ...

2)介绍在。state-name表示法

中使用的父节点
// exists already
.state('home', { ...
// this parent must be declared to be used later
.state('home.app', {
// now we can use parent 'home.app' because it exists
.state('home.app.detail', {
相关文章：