使用Angular UI Router，如何使一个状态成为所有状态的子状态

With Angular UI Router, how do make a state a child of all states?

本文关键字：状态 UI Angular Router 何使一 使用      更新时间：2023-09-26

我想在Angular UI Router中将模式对话框设置为单独的状态。然而，我有一种情况，模态框可以/应该出现在所有状态的顶部。。。我不确定这是否可能。

例如，假设/store和/admin是两个独立的顶级状态。现在想象一下，我有一个不相关的模态对话框，比如一个联系人表单（只是一个例子），应该放在每个表单的顶部。

如果我将其建模为/contact，那么/store或/admin状态显然会被遗忘，因此模态后面的背景是空白的。

解决方案可能是有两个子状态，如/store/contact和/admin/contact，这将保留模式对话框后面的内容。。。然而，这种方法不适用于X个顶级状态。

简而言之，我怎么能说/contact是所有状态的子级，而不考虑嵌套？这可能吗？或者在这种情况下，我只是不必使用angular UI路由器吗？

UI-Router状态机用父子关系表示。所以答案是-每个孩子都可以有一个父母。这是事实。并且它可以被视为"；一种不起作用的回答"。

但是，如果我们真的想让许多子状态/contact (where 联系 feature is moved to its own state)，我会而不是说重复定义是个问题。

它可以标记为开销，但状态只是一个配置。它对性能没有太大影响。视图和控制器无论如何都是按状态实例化的。。。而不管其状态定义

// declare once view
var contactState = {
  controller: ...
  template: ...
  ...
};
// reuse as need for some ...
stateNamesWithContact.forEach( function(stateName)
{
    // regiester state many times as "some.parnet.child.contact"
    $stateProvider
        .state(stateName + ".contact", contact);
    ...

另一种方法是NOT使用Contact作为子状态。将其移动到视图（哪些功能将支持模式）

多个命名视图

在根状态下定义一次-作为视图

如果Contact视图/控制器是静态的，我们可以将它们挂入超级根状态：

.state("root", {
    views : {        
        "" : {
           template: "<ui-view />" // here will be injected all children
        }
        "contact@" : {
           ... //setting of the Contact view / controller
        }
    }
}

现在，每个"；"父"；状态可以从中获利，而不会影响url或name（如果使用parent设置，则无需具有"root.someParent"）

.state("someState", {
    parent: "root"
    ...
相关文章：