具有多个父状态的 Angular-ui-router 子状态 [英] Angular-ui-router child state with multiple parent states

问题描述

使用Angular-ui-router，是否有可能定义一个具有多个父状态的子状态:

Using Angular-ui-router, is there a possibility to define a child-state that has multiple parent states:

$stateProvider
    .state("parent1", {
        url: '/',
        templateUrl: 'parent1.html'
    })
    .state('parent2', {
        url: '/parent2',
        templateUrl: 'parent2.html'
    })

    //Make accessible from every state parent-state
    .state("child", {
        url: 'child',
//TODO  parents: ['parent1', 'parent2']
        onEnter: function() {
            //do something;
        }
    })

示例:

您的 Angular 应用有一个指令，该指令在您的应用中的不同状态下被多次使用.该指令本身包含一个重定向到不同状态的链接.根据指令的使用位置，它应该将其子状态附加到当前活动的父状态.

Your Angular app has a directive that is used multiple times in different states in your app. The directive itself includes a link which redirects to a different state. Depending on where the directive is used, it should append its child-state to the current active parent-state.

为state1.child、state2.child 等每个排列定义状态似乎是不正确的.需要有更好的方法.

It just doesn't seem right to define states for each permutation like state1.child, state2.child etc.. There needs to be a better way.

推荐答案

这种层次结构会违背 DOM 树结构，根据定义，DOM 树结构不允许同一元素有多个父元素.

This kind of hierarchy would go against the DOM tree structure, which by definition doesn't allow multiple parents of same element.

此外，它容易出错(和头痛)，很容易导致 多重继承钻石问题，作为子状态 在某些情况下从父状态继承.

Moreover, it is error (and headache) prone and could easily result in the multiple inheritance diamond problem, as child state do inherit from parent state in some cases.

这听起来像是一个指令，而不是一个状态，将是您正在寻找的更好的解决方案.

It sounds like a directive, and not a state, would be the better solution for what you're looking for.

刚刚看到有一个已解决的问题，这是关闭，因为他达到了相同的结论(即指令是更好的方法)

Just saw that there's a closed issue on this, which is closed because he reached the same conclusion (that a directive is the better way)

这篇关于具有多个父状态的 Angular-ui-router 子状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！