如何使用uiRouter在Plunker中使用url参数来设置$stateParams？

Question

我试图用url-query参数来演示一些东西，但是我甚至不能让参数显示出来(这样就不能演示我原来的问题了)。

我已经创建了一个简单的插入器，其中的states属性如下所示：url: '/root?firstParam'然后我想要的是用我在浏览器的url中为该queryParameter编写的任何内容填充$stateParams.firstParam。Plunker，plunkerWithParameter?firstParam=foo

我可以想象第一个url的$stateParams.firstParam是未定义的，但是第二个url设置为"foo“。但在这两种情况下它都是未定义的。

如何设置$stateParams.firstParam？

Answer 1

编辑:似乎这实际上是可能的(@Rogerio Soares的回答证明了这一点)。将我的答案保留在这里，因为代码中还有其他错误。

无法从Plnkr应用程序的浏览器搜索栏中获取参数，因为它是在iFrame中运行的。我修复了你下面的另一个问题：

我将参数添加到otherwise语句中，如下所示：

$urlRouterProvider.otherwise('/root?firstParam=test');

问题是，当没有找到其他路由时，您重定向到root，并且您没有为路由指定任何参数。

更新的PlunkR：https://plnkr.co/edit/OxEGVkhzBO332ym3q8fV?p=preview

Answer 2

我的两点意见:就像@Johannes Ferner所说的那样，Plunker使用iframe，但你至少可以用document.referrer得到你的url虽然有点老生常谈，但它是有效的:D

  $scope.parameters = [];
  var url = document.referrer;
  var props = url.split("?")[1]
  .split("&")
  .map(function(o){ 
    return o.split("=");
  });
  console.log(props);
  for(var i = 0; i < props.length; i++){
    var prop = props[i];
    console.log(prop);
    if($stateParams.hasOwnProperty(prop[0])){
      $scope.parameters.push({name: prop[0], value:prop[1]});
    }
  }

https://plnkr.co/edit/Cejgj1cLJnwQT2LzjsRm?firstParam=foo&p=preview

Answer 3

问题是plnkr是在iFrames中运行的，所以您尝试的URL是错误的。

试试这个：https://plnkr.co/edit/jV2pdV6q8g8QZ132Qu3A

我已经添加了一个指向根状态的链接，第一个参数设置为'Yeah‘，如下所示：

<a ui-sref="root({firstParam: 'YEAH'})">Go to Root with Firstparam = "YEAH"</a>

这将导致以下网址：https://run.plnkr.co/roo/root?firstParam=YEAH。

查询错误:如果您直接在浏览器中打开此，查询参数将正确传递到您的AngularJS应用程序并设置为$stateParams.firstParam

正确的：如果代码没有嵌入到iframe中，我没有找到一种方法来获得一个永久的plnkr地址。