带有动态选项卡的 ui-router-extras答案

【问题标题】：ui-router-extras with dynamic tabs带有动态选项卡的 ui-router-extras
【发布时间】：2017-07-12 14:48:13
【问题描述】：

克里斯托珀，

我想知道动态生成选项卡的用例（考虑客户端列表）是否适用于您的 ui-router extras 选项卡解决方案？问题是您的示例使用了命名的 ui-views，这在我的情况下不起作用，因为它们是在运行时生成的，而您添加的路由是在配置时生成的。

提前致谢，路易斯

【问题讨论】：

【解决方案1】：

您可以在控制器中使用 $stateProvider 以及绑定名称的视图中的 ui-view 名称来动态生成状态

<div ui-view="myView{{variable}}"></div>

使用插值视图时出现问题，但 is solved since 0.2.12（上传到最新的 0.2.13 以防它不起作用）和 here 是一个示例，但没有 ui-router-额外的。让我们知道它是否工作正常或更新 plnkr。

【讨论】：

马托，感谢您的回复。问题是 $stateProvider 中仍然有两个硬编码状态 step1 和 step2。我需要生成一个链接到动态选项卡的动态状态。
但是你可以随时添加新的状态，你唯一要做的就是创建一个调用 $stateProvider 的服务，你可以查看几个例子here
是的，我昨天调查过，但知道需要加载哪些状态并不是一个好方法。重点是您可以设置一个模式，当您调用 state.go 或将 URL 复制到浏览器中时，它将遵循该路线。我不知道用户会提前选择什么数据。我真正需要的是每个路由的 ui-view 以及 $stateProvider 中将视图名称链接到变量的方式，就像 ui-router 对 url 的方式一样：'/step/{number}' .
我认为更多的是设计问题，您可以使用部分 url 作为 stateParams 例如 url: '/myParent/myVuew/{selectedTabId:[a-zA-Z0-9 .]+}', 然后在你的控制器中使用 $stateParams 你可以提取例如 selectedTabId 的值并渲染某些东西或初始化另一个嵌套视图
Matho，我的目标是将 DOM 保持在单独的 ui 视图中。想象一下左侧的客户列表和右侧的每个客户的详细信息。您希望在客户端之间来回切换，并且不会丢失您当前正在编辑的客户端的状态。这是用例。我们想为此使用 ui-router，因此如果有人使用 URL 或通过调用 $state.go 在代码中打开客户端，我们可以对客户端进行水合。