如何基于角度 UI-Router 中的 $stateParams 动态创建嵌套状态

Question

我想根据传递的状态参数创建子状态（嵌套状态）。

例如我有一个动态参数，'pageId'。如果$stateparams.pageId 是'page2'，那么我想为此创建两个嵌套状态。

我该怎么做？提前致谢。

这是为此创建的 plunkr

Plnkr

app.config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider){
        $stateProvider.state('page', {
            url: '/:pageId',
            templateUrl: function($stateParams){
              return $stateParams.pageId +".tpl.html";
            }
        });

        $urlRouterProvider.otherwise('/page1');
    }]);

Answer 1

有a working plunker

我们可以创建两个状态。一个不会使用嵌套视图，第二个会有它们。

// state without nested
.state('pageWithout', {
  url: '/{pageId:(?:page1|page3|page5)}',
  templateUrl: "page1.tpl.html",
})
// state with nested
.state('pageWith', {
  url: '/:pageId',
  views : {
    '' : {
      templateUrl: "page2.tpl.html",
    },
    '@pageWith' : {
      template: "<h2>the SECOND content for state with nested views</h2",
    }
  }
});

因此，诀窍是使用某种模式来说明哪些 pageId 值应该进入第一个状态。检查

UrlMatcher

负责url : 'url def...'处理

这样我们就可以将相似的链接翻译成不同的状态，具有不同的嵌套视图结构：

// without nested views
<a href="#/page1">
<a href="#/page3">
<a href="#/page5">

// with nested views
<a href="#/page2">
<a href="#/pageA">
<a href="#/pageB">

查看it here

EXEND，带有子状态和一些默认值。 udpated plunker

所以，我们可以创建第二个状态的几个子节点：

// children
.state('pageWith.defaultChild', {
  url: '/default',
  views : { 
    '' : {
      template: "<h3>the pageWith.defaultChild </h3",
    }
  }
}) 
.state('pageWith.childWithParams', {
  url: '/{id:int}',
  views : {
    '' : {
      template: "<h3>the child with ID param {{$stateParams.id}} </h3",
    }
  }
});

基于此解决方案：

Redirect a state to default substate with UI-Router in AngularJS

我们可以用 redirectTo

来装饰我们的父状态

.state('pageWith', {
  url: '/:pageId',
  redirectTo: 'pageWith.defaultChild',
  ...

只需添加这个简单的监听器

.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    });
}]);

勾选默认state redirect here

Answer 2

我不确定是否清楚地了解您要做什么，这是您要做什么吗？

app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
    $stateProvider
        .state('page', {
            url: '/:pageId',
            templateUrl: function($stateParams){
                return $stateParams.pageId +".tpl.html";
            },
        });
        .state('page.firstchild', {
            url: '/foo', // will have url /:pageId/foo because it inherits from its parent
        })
        .state('page.secondchild', {
            url: '/bar' // same here
        })

    $urlRouterProvider.otherwise('/page1');
}]);