AngularJS UI路由器：ui-sref没有更新地址栏中的URL,因为父状态

发布时间：2020-12-17 17:13:41 所属栏目：安全来源：网络整理

导读：我正在使用Angular UI路由器,似乎遇到了一个奇怪的问题.当我单击附加了ui-sref指令的链接时,它会像我期望的那样成功加载新视图,但是,它不会更新URL栏.我相信这是偶然的,因为父状态的url是一个动态的StateParam /：room.我该如何解决这个问题？这是我的UI路

我正在使用Angular UI路由器,似乎遇到了一个奇怪的问题.当我单击附加了ui-sref指令的链接时,它会像我期望的那样成功加载新视图,但是,它不会更新URL栏.我相信这是偶然的,因为父状态的url是一个动态的StateParam /：room.我该如何解决这个问题？

这是我的UI路由器的片段

// Room
.state({
  name: 'room',url: "/:room",views: {
    "main": {
      templateUrl: "views/pages/chat.html",controller: "RoomCtrl"
    },"login@room": {
      templateUrl: "views/partials/_login.html"
    },"navigation@room": {
      templateUrl: "views/partials/_navigation.html",controller: "NavigationCtrl"
    }
  },resolve: {
    userLocation: function(geolocationFactory) {
      return geolocationFactory;
    }
  }
})

// Share
.state({
  name: 'room.share',url: "/share",views: {
    "share@room": {
      templateUrl: "views/partials/_share.html",controller: "ShareCtrl"
    }
  }
});

UI的SREF
< button id =“share-button”ui-sref =“room.share”>分享< / button>

解决方法

我创建了一个 plunker来演示正在发生的事情

所以我们可以在这样的房间之间导航：

<a ui-sref="room({room:1})">room 1</a>
<a ui-sref="room({room:2})">room 2</a>
<a ui-sref="room({room:3})">room 3</a>

实际上,这将创建这样的URL

#/1      // where 1 represents the id of the :room
#/2      
#/3

现在,我们可以导航到子状态.share而不指定：room id

<a ui-sref="room.share">room.share</a>

会发生什么？首先,房间将是空的……没有选择房间.

其次 – 以前选择的房间(房间ID)不会改变.因此,生成的URL将取决于已选择的房间.如果我们在2号房间,生成的网址将是：

#//share

但我们将被重定向到

#/2/share

因为还有$stateParams.room === 2

最后,我们应该总是传递完整的状态签名：

<a ui-sref="room.share({room:1})">room.share({room:1})</a>
<a ui-sref="room.share({room:2})">room.share({room:2})</a>
<a ui-sref="room.share({room:3})">room.share({room:3})</a>

检查所有here(单击右上角的蓝色图标,在带有URL的分隔窗口中打开prview)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!