Angular-ui 路由器同时获得两个活动状态 [英] Angular-ui Router get two states active in parallel

问题描述

我需要并行使用两种状态，一种用于我的页面，另一种用于具有多个子状态的模态.现在调用模态状态将清除我的页面，因为页面状态发生了变化.

I need to use two states in parallel, one for my page and an other for a modal with several sub states. Right now calling the modal state will wipe out my page since the page state changed.

创建我的页面的子状态子项不是解决方案，因为模态将在多个页面上使用.

Create a child state child of my page wouldn't be a solution since the modal will be used on several pages.

示例:

$stateProvider
.state('user', {}) // page
.state('bookshelf', {}) // page
.state('books', {}) // modal
.state('books.read', {}) // sub state of modal

因此，如果我使用 user 并打开我的模态，那么状态将更改为 books，然后我的模态将具有内容，但页面内容将被擦除出来.

So if I'm on user and open my modal then the state would change to books, my modal would then have the content but the page content will be wiped out.

我该如何解决?

推荐答案

我相信您希望采用的方式目前在 UI.Router 中是不可能的.您所描述的是一个模态组件(最好将其编写为指令)，它独立于主状态跟踪其状态.

I believe the way you're looking to do this is not possible with UI.Router currently. What you're describing is a modal component (which would ideally be written as a directive), which tracks it's state independently from the main state.

考虑的方式是 UI.Router 通过创建状态树来工作.在任何给定时间，您只能看到树的一个分支.你可以深入一个分支(即:book、book.open、book.open.checked)，但你不能一次在两个地方.

The way to think about it, is that UI.Router works by creating a state tree. At any given time you can only be looking at one branch of the tree. You can go deeper down a branch (ie: book, book.open, book.open.checked), but you can't be in two places at once.

上述问题的另一个问题是如何将两个不同树的状态序列化为一个 url?不是说做不到，只是一个很难解决的问题.

Another issue with the problem above is how do you serialize the state of the two different trees into one url? It's not to say it can't be done, it's just a hard problem to solve.

检查这些问题:

• https://github.com/angular-ui/ui-router/issues/119
• https://github.com/angular-ui/ui-router/issues/384
• https://github.com/angular-ui/ui-router/issues/475

还可以查看这些存储库，它们可能会进一步解决问题.

Also checkout these repos, they might be further along the lines of solving the problem.

• https://github.com/afterglowtech/angular-detour
• https://github.com/stu-salsbury/angular-couch-potato

就解决您当前的问题而言，我认为最简单"的方法是放弃控制状态配置中模态的状态.

As far as solving your immediate problem, I think the 'easiest' way would be to ditch controlling the state of the modal inside your state config.

相反，我会添加某种根或抽象状态，然后跟踪模态是否在那里打开.然后，您可以使用事件在控制器之间进行通信，如此处所示.注意:听 $rootScope 有性能影响，所以请确保研究那些.但是(有人可以随时纠正我)，这里的实现没有这些问题，因为 AppCtrl 永远不会被破坏.

Instead, I would add some sort of root or abstract state, and then track whether the modal is open there. Then, you can communicate between controllers using events as shown here. Note: There are performance implications with listening to $rootScope, so be sure to research those. However (someone feel free to correct me), the implementation here doesn't have those problems, because the AppCtrl is never destroyed.

事实证明这是一个非常流行的用例，UI Router 的核心贡献者之一维护了一个名为 的插件/附加项UI 路由器附加功能

Turns out this is a pretty popular use case, and one of the core contributors to UI Router maintains a plugin/addition called UI Router Extras

它还包括用于延迟加载的实用程序，称为未来状态"，非常有用.

It also includes utilities for lazy loading, called "Future States" which are very helpful.

话虽如此，我希望有时间做的一项功能是维护 URL 中的所有状态(或者可能是本地存储)并允许可重用​​的状态组件".后者也在 UI 路由器路线图中.

That being said, one feature I'm hoping to get time to work on is maintaining all state within the URL (or perhaps, local storage) and allowing for reusable state "components". The latter is in the UI Router roadmap as well.

这篇关于Angular-ui 路由器同时获得两个活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！