与父级具有相同URL的默认子级状态

Question

我的应用程序有很多主要状态，其中一个是用户个人资料：

  $stateProvider.state('profile', {
    url: '/profile/',
    templateUrl: 'profile/profile.html',
    controller: 'Profile',
  });

但这只是具有不同配置文件设置的嵌套页面的容器。它的模板只包含主菜单和嵌套状态的ui-view。控制器仅用于该菜单处理。

其中一个嵌套视图应该是默认网址，并且网址与父网址相同，因此不应该在网址中添加任何后缀，但我无法实现。

这是我试过的：

  $stateProvider.state('profile.details', {
      url: '',
      templateUrl: 'profile/details.html',
      controller: 'ProfileDetails',
  });

这根本不起作用，在网址/profile/处只显示菜单且空ui-view元素。第二种方法：

  $stateProvider.state('profile.details', {
      url: '/',
      templateUrl: 'profile/details.html',
      controller: 'ProfileDetails',
  });

匹配网址/profile//（结尾有2个斜杠）。在网址/profile/，仍有菜单和空ui-view元素。

如何实现这一结果？这甚至可以使用angular-ui-router吗？

Answer 1

使您的父状态变为抽象。这将阻止进入该状态，并强制仅进入子状态。抽象状态是完美的儿童模板。也摆脱了网址：

$stateProvider.state('profile', {
    abstract: true,
    templateUrl: 'profile/profile.html',
    controller: 'Profile',
  });

现在为您的孩子状态定义绝对URL

$stateProvider.state('profile.details', {
      url: '^profile',
      templateUrl: 'profile/details.html',
      controller: 'ProfileDetails',
  });

这应该有效。