离子路由问题，显示空白页

小编典典

离子路由问题，显示空白页

angularjs

我开始在sidemenu入门应用程序之上构建ionic应用程序。入门应用程序具有抽象的基本状态“应用程序”，所有侧面菜单页面都是该应用程序的子级，例如app.search，app.browse，app.playlists等。

我有类似的层次结构。但是，我希望起始页面是其他页面，这意味着它在应用程序级别。

状态看起来像这样：

$stateProvider

.state('app', {
  url: "/app",
  abstract: true,
  templateUrl: "templates/menu.html",
  controller: 'AppCtrl'
})

.state('join', {
  url: "/join",
  views: {
    'menuContent' :{
      templateUrl: "templates/join.html",
      controller: 'joinCtrl'
    }
  }
})

.state('app.search', {
  url: "/search",
  views: {
    'menuContent' :{
      templateUrl: "templates/search.html",
      controller: 'searchCtrl'
    }
  }
})

.state('app.results', {
  url: "/results",
  views: {
    'menuContent' :{
      templateUrl: "templates/results.html",
      controller: 'resultsCtrl'
    }
  }
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/join');

当我运行应用程序时，URL默认为

http://192.168.1.4:8100/#/join

并显示空白页。显然，join.html不是空白。另外，不输出joinCtrl中的console.log消息。

我无法弄清楚为什么它不加载联接页面。当我将else更改为指向’/ app / search’时，一切正常。

知道发生了什么吗？如何默认加载初始页面，然后导航到“ app.search”状态？

阅读 225

2020-07-04

共1个答案

小编典典

我希望这是因为该应用程序是抽象的-它的存在是有原因的。成为父级/版式状态。在其模板中，最有可能存在所有其他状态。

如果是，请检查我创建的这个工作示例以进行演示。我们需要将标记join为国家的孩子app。然后，'menuContent'将在应用模板中正确搜索占位符：

.state('join', {
      parent: 'app',
      url: "^/join",
      views: {
        'menuContent': {
          templateUrl: "tpl.join.html",
          controller: 'joinCtrl'
        }
      }
})

有一个工作的家伙

定义url: "^/join",是为了支持这种想法，即url定义如下：

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/join');

甚至可以用于嵌套状态 （join是应用程序的子级） 。看到：

[绝对路线（^）](https://github.com/angular-ui/ui-router/wiki/URL-

Routing#absolute-routes-)

如果您要进行绝对的url匹配，则需要在url字符串前添加特殊符号'^'。

这只是一种方法…如果联接不是嵌套状态，我们可以做类似的事情，但是它应该针对未命名视图”而不是’menuContent’

2020-07-04