无法从状态 '' 解析 '...'

Posted 2023-02-19

【中文标题】无法从状态 \'\' 解析 \'...\'

【英文标题】：Could not resolve '...' from state ''无法从状态 '' 解析 '...'

【发布时间】：2015-03-31 15:51:21

【问题描述】：

这是我第一次尝试使用 ui-router。

这是我的 app.js

angular.module('myApp', ['ionic'])

.run(function($ionicPlatform) 
  $ionicPlatform.ready(function() 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) 
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    
    if(window.StatusBar) 
      StatusBar.styleDefault();
    
  );
)

.config(function($stateProvider, $urlRouterProvider)
  $urlRouterProvider.otherwise("/index.html");

  $stateProvider.state('index', 
    url: '/'
    template: "index.html",
    controller: 'loginCtrl'
  );


  $stateProvider.state('register', 
    url: "/register"
    template: "register.html",
    controller: 'registerCtrl'
  );
)

如您所见，我有两种状态。我正在尝试像这样注册状态：

<a ui-sref="register">
  <button class="button button-balanced">
    Create an account
  </button>
</a>

但我得到了

无法从状态“”解析“注册”

异常。这里有什么问题？

【问题讨论】：

这有点傻，但我看到您正在创建模块“myApp”并将“ionic”列为依赖项，但是，我没有看到“ui-router”列为一个依赖。您是否将其包含在其他地方？

@deadbabykitten，由 ionic 负责。

@RogersSampaio - 我最近才发现，我以前没有使用过 ionic，但现在正在将它用于移动项目。真是不可思议。

【参考方案1】：

这种错误通常意味着（JS）代码的某些部分没有加载。 ui-sref 内部的状态丢失。

有a working example

我不是 ionic 方面的专家，所以这个例子应该表明它可以工作，但我使用了更多技巧（标签的父级）

这是一个有点调整的状态def：

.config(function($stateProvider, $urlRouterProvider)
  $urlRouterProvider.otherwise("/index.html");

    $stateProvider

    .state('app', 
      abstract: true,
      templateUrl: "tpl.menu.html",
    )

  $stateProvider.state('index', 
    url: '/',
    templateUrl: "tpl.index.html",
    parent: "app",
  );


  $stateProvider.state('register', 
    url: "/register",
    templateUrl: "tpl.register.html",
    parent: "app",
  );

  $urlRouterProvider.otherwise('/');
) 

这里我们有带有标签的父视图及其内容：

<ion-tabs class="tabs-icon-top">

  <ion-tab title="Index" icon="icon ion-home" ui-sref="index">
    <ion-nav-view name=""></ion-nav-view>
  </ion-tab>

  <ion-tab title="Register" icon="icon ion-person" ui-sref="register">
    <ion-nav-view name=""></ion-nav-view>
  </ion-tab>

</ion-tabs>

不仅仅是一个如何让它运行的例子，然后以正确的方式使用离子框架......检查这个例子here

这里有一个类似的问答，其中有一个使用命名视图的示例（肯定更好的解决方案）ionic routing issue, shows blank page

标签中带有命名视图的改进版本在这里：http://plnkr.co/edit/Mj0rUxjLOXhHIelt249K?p=preview

  <ion-tab title="Index" icon="icon ion-home" ui-sref="index">
    <ion-nav-view name="index"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Register" icon="icon ion-person" ui-sref="register">
    <ion-nav-view name="register"></ion-nav-view>
  </ion-tab>

定位命名视图：

  $stateProvider.state('index', 
    url: '/',
    views:  "index" :  templateUrl: "tpl.index.html"  ,
    parent: "app",
  );


  $stateProvider.state('register', 
    url: "/register",
    views:  "register" :  templateUrl: "tpl.register.html",  ,
    parent: "app",
  );

【讨论】：

我的路线看起来不错，我检查了其他离子示例，我的代码看起来一样。我在该配置函数中放入了一些调试器、console.log 和警报，但它们都没有执行。如何确保我的路线已加载？我能以某种方式看到它们吗？

如果我想知道注册了哪些状态，我通常会在 .run() 方法中注入 $state info。然后你可以执行 console.log($states.get()) ，它将返回一个状态数组。 .run ($state) console.log($states.get()); );

【参考方案2】：

Ionic 也遇到了同样的问题。

事实证明我的代码没有任何问题，我只需要退出 ionic serve 会话并再次运行 ionic serve。

回到应用程序后，我的状态运行良好。

如果您正在运行 gulp，我还建议您在 app.js 文件上按几次保存，以确保重新编译所有内容。

【讨论】：

在我的情况下，重新启动服务器并没有解决问题，但帮助我有一个更好的错误来调试。谢谢！

【参考方案3】：

只是来这里分享发生在我身上的事情。 您不需要指定父级，状态以面向文档的方式工作，因此，您可以将状态更改为 app.index

，而不是指定父级：app

.config(function($stateProvider, $urlRouterProvider)
    $urlRouterProvider.otherwise("/index.html");

$stateProvider.state('app', 
  abstract: true,
  templateUrl: "tpl.menu.html"
);

$stateProvider.state('app.index', 
    url: '/',
    templateUrl: "tpl.index.html"
);

$stateProvider.state('app.register', 
    url: "/register",
    templateUrl: "tpl.register.html"
);

编辑 警告，如果你想深入嵌套，我必须指定完整路径。例如，你不能有这样的状态

app.cruds.posts.create

没有

app
app.cruds
app.cruds.posts

或者 angular 会抛出一个异常，说它无法计算出溃败。为了解决这个问题，您可以定义抽象状态

.state('app', 
     url: "/app",
     abstract: true
)
.state('app.cruds', 
     url: "/app/cruds",
     abstract: true
)
.state('app/cruds/posts', 
     url: "/app/cruds/posts",
     abstract: true
)

【讨论】：

感谢EDIT Warning, if you want to go deep in the nesting, the full path must me specified. For example, you can't have a state like，这是我的问题。

我遇到了和上面一样的问题，但也想在我的状态名称路径中包含一些不会反映在路由路径中的东西，所以你可以排除中间的url属性状态，然后下面的路由url会被追加到之前的路由url中。

【参考方案4】：

Ionic 路由也有同样的问题。

简单的解决方案是使用州名——基本上是state.go(state name)

.state('tab.search', 
    url: '/search',
    views: 
      'tab-search': 
        templateUrl: 'templates/search.html',
        controller: 'SearchCtrl'
      
    
  )

在控制器中你可以使用$state.go('tab.search');

【参考方案5】：

我遇到过一个错误是由

引发的

$state.go('');

这是显而易见的。我想这可以帮助将来的人。

【参考方案6】：

Magus 的回答：

我必须指定完整路径

抽象状态可用于为所有子状态 URL 添加前缀。 但请注意，abstract 仍然需要一个 ui-view 来填充其子级。为此，您只需将其内联添加即可。

.state('app', 
   url: "/app",
   abstract: true,
   template: '<ui-view/>'
)

有关更多信息，请参阅文档：https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views