angularjs：多个抽象状态，重定向问题答案

【问题标题】：angularjs: multiple abstract states, redirecting issueangularjs：多个抽象状态，重定向问题
【发布时间】：2017-10-24 18:13:10
【问题描述】：

我正在尝试将两个抽象状态视图合并为一个状态。下面是我的代码。问题是当我转到.../#!/app/user/27/settings 时，它会将我重定向到.../#!/app/user/27，而不是停留在用户设置中。

Angular 1.6.4 版

App.js：

module.config(function ($stateProvider, $urlRouterProvider) 
{

    $urlRouterProvider.otherwise('/app/home');
    $stateProvider

        .state("app", {
            abstract: true,
            url: "/app",
            component: "appRouting"
        })


        .state("app.user", {
            url: "/user/:userId",
            component: "userProfileRouting"
        })

        .state("user", {
            abstract: true,
            url: "/user/:userId",
            component: "userRouting"
        })

        .state("app.user.settings", {
            url: "/settings",
            //component: "userSettingsRouting"
            template: "hello"
        });
}

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

有趣的场景，这里是解决方案：

您可以签入Angularjs Nested states: 3 level 嵌套是可能的。

问题到了路由是怎么角度的，主要是ui-view是怎么渲染路由的。类似于this问题。

关键是你的状态 app.user 必须有一个 ui-view 包装：

<div ui-view>
  ...component code
</div>

请查看我创建的plnkr 来描述解决方案。

主要关注contact.detail.html的内容。

【讨论】：