为嵌入式视图ui-路由器传递“params”

时间:2021-08-25 12:30:01

I'm using UI-Router to build an application. I need to have multiple views on one page so I'm using abstract states. I tried to pass the parameter "isEmbedded" to the owner view, but it's unfortunately not working. I'm wondering if its because I'm passing it to a child view. When I console.log($stateParams) in ownerCtrl, it does not show the isEmbedded parameter. Any idea why?

我使用UI-Router构建一个应用程序。我需要在一个页面上有多个视图,所以我使用的是抽象状态。我试图将参数“isEmbedded”传递给owner视图,但不幸的是它不能工作。我想知道是不是因为我把它传递给了一个子视图。在ownerCtrl中,当我对$stateParams进行操作时,它不会显示isEmbedded参数。知道为什么吗?

.state('dog', {
    url: "",
    parent: "dogAbstract",
    views: {
        "owner": {
            templateUrl: 'client/people/views/owner.ng.html',
            controller: 'ownerCtrl',
            params:{
                isEmbedded:true
            }
        }
    }
})

P.S. I got the idea to use params from this question:

附注:我从这个问题中得到了使用params的想法:

Angular ui router passing data between states without URL

角ui路由器在没有URL的状态之间传递数据

1 个解决方案

#1


2  

While $stateParams belongs to state, we can use special resolve for a view:

当$stateParams属于状态时,我们可以使用特殊的解决方案来查看:

...
views: {
    "owner": {
        templateUrl: 'client/people/views/owner.ng.html',
        controller: 'ownerCtrl',
        resolve:{
            isEmbedded: function() { return true},
        }
    }
}

I created an example here with these two child states

我在这里举了两个孩子的例子。

.state('parent.child', { 
      url: "/child",
      templateUrl: 'tpl.html',
      controller: 'ChildCtrl',
      resolve: {
        isEmbedded: function() { return false},
      }
})
.state('parent.child2', { 
      url: "/child2",
      templateUrl: 'tpl.html',
      controller: 'ChildCtrl',
      resolve: {
        isEmbedded: function() { return true},
      }
})

And controller can consume it:

控制器可以消费:

.controller('ChildCtrl', ['$scope', 'isEmbedded', 
  function ($scope, isEmbedded) { 
    console.log(isEmbedded)
  }
])

Check it here

检查在这里

#1


2  

While $stateParams belongs to state, we can use special resolve for a view:

当$stateParams属于状态时,我们可以使用特殊的解决方案来查看:

...
views: {
    "owner": {
        templateUrl: 'client/people/views/owner.ng.html',
        controller: 'ownerCtrl',
        resolve:{
            isEmbedded: function() { return true},
        }
    }
}

I created an example here with these two child states

我在这里举了两个孩子的例子。

.state('parent.child', { 
      url: "/child",
      templateUrl: 'tpl.html',
      controller: 'ChildCtrl',
      resolve: {
        isEmbedded: function() { return false},
      }
})
.state('parent.child2', { 
      url: "/child2",
      templateUrl: 'tpl.html',
      controller: 'ChildCtrl',
      resolve: {
        isEmbedded: function() { return true},
      }
})

And controller can consume it:

控制器可以消费:

.controller('ChildCtrl', ['$scope', 'isEmbedded', 
  function ($scope, isEmbedded) { 
    console.log(isEmbedded)
  }
])

Check it here

检查在这里