angular.js:13550 错误：无法从状态“主路径”解析“项目 1”答案

【问题标题】：angular.js:13550 Error: Could not resolve 'item1' from state 'mainpath'angular.js:13550 错误：无法从状态“主路径”解析“项目 1”
【发布时间】：2016-09-24 16:37:11
【问题描述】：

在我的默认主页中，我有 1 个导航栏，其中包含 2 个项目。

我的主 ui 视图的配置是：

angular.module('app').config([...
    $urlRouterProvider.otherwise('/mainpath');
    $stateProvider
      .state('mainpath', {
        url: '/mainpath',
        template: '<main-html></main-html>'
      });
... ]);

所以当我访问我的站点时，默认情况下它将指向 localhost:8080/mainpath。但是由于我的主页中有一个包含 2 个项目的导航栏，因此我将所选项目设置为 item1，并且 item1 的 md-nav-sref 指向“item1State”。所以我期待当我去 localhost:8080 时，它不会去 localhost:8080/mainpath，而是会直接去 localhost:8080/mainpath/item1.. 我这里的意思是 URL 会改变，但是内容是一样的，因为我的 main-html 文件包含导航栏。我只是希望 item1 html 加载到 main-html 的 ui-view 中，目前还没有发生。

我对默认加载的视图的配置是：

angular.module('app').config([...
    $stateProvider
      .state('item1State', {
        url: '/item1',
        template: '<item1></item1>'
      })
      .state('item2State', {
        url: '/item2',
        template: '<item2></item2>'
      });
... ]);

当我尝试切换到不同的导航栏项目时，我收到错误：“无法从状态 'mainpath' 解析 'item1'”，与 item2 相同。所以我遇到了 2 个问题，一个是我期望我的 url 将是 localhost:8080/mainpath/item1，因为我在加载主页时默认选择了导航栏 item1。接下来是选择导航栏项目时出现此错误。我是angularjs的新手，希望你能理解。谢谢

【问题讨论】：

你的两个路由器是分开的，你没有嵌套它们。要在 child 中使用父路由，您需要以这种方式进行配置。关注这个github.com/angular-ui/ui-router/wiki/…
哇哦！太感谢了。我仍然需要了解有关 angularjs 的更多信息。我会继续阅读并感谢您的快速回答，现在一切正常。
我应该把它作为答案吗？如果你能接受？

标签： angularjs angular-ui-router

【解决方案1】：

你的两个路由器是分开的，你没有嵌套它们。要在 child 中使用父路由，您需要这样配置。

$stateProvider
.state('contacts', {
    abstract: true,
    url: '/contacts',

    // Note: abstract still needs a ui-view for its children to populate.
    // You can simply add it inline here.
    template: '<ui-view/>'
})
.state('contacts.list', {
    // url will become '/contacts/list'
    url: '/list'
    //...more
})
.state('contacts.detail', {
    // url will become '/contacts/detail'
    url: '/detail',
    //...more
})

更多信息here

【讨论】：