始终如一地将 UI-Router 状态参数从 parent 传递到 child

Question

我有以下 UI-Router 状态定义（为简洁起见，已缩减为仅适用的方面）：

 .state('ep.perma', {
    url: '/:permalink',
    params: {permalink: ''}, //default
    templateUrl: 'views/conference/home.html',
    controller: 'HomeCtrl'
  })

  .state('ep.perma.login', {
    url:'/login',
    templateUrl: 'views/dialogs/login.html',
    controller: 'LoginCtrl',
  })

  .state('ep.perma.register', {
    url: '/register',
    templateUrl: 'views/dialogs/register.html',
    controller: 'RegisterCtrl'
  })

parent ep.perma 状态中的 :permalink 参数可以是任何东西，但假设它是 'acb123'。登录和注册状态每个都有一个 sref link 来切换到它们 html 中的其他状态。如果您最初进入 parent ep.perma 状态作为 url，则一切正常。你可以整天在登录和注册之间切换，并保留:permalink参数。

但是，如果您通过 URL .../acb123/login 或 .../abc123/register 导航至登录或注册状态，最初一切正常。但是，如果您随后尝试从登录切换到注册，或者通过单击 html 中的 SREF link（取决于您进入第一个 URL）以相反的方式切换，则： permalink 参数引用丢失。所以，我在 .../abc123/login，登录 html 中注册的 sref 应该是 .../abc123/register，但是 //register。它在 URL 的初始加载中存在，但不在 html sref 中直接转到另一个。

只有通过 URL 直接进入登录或注册 child 状态才会发生这种情况。如果我去 parent ep.perma URL .../abc123 最初一切都很好。

关于为什么会发生这种情况的任何想法and/or如何解决这个问题？我发现在发布之前在这里挖掘我可以通过解析从 parent 传递参数，然后在 children 中使用它们，但不想以 .../ abc123/abc123/login 如果不通过 url 直接访问。我也不是 100% 清楚如何将它们设置为 child 状态（每个示例只有控制器 here

我需要用户能够通过直接 URL 登录或注册，并在具有初始指定的 :permalink 参数之间切换，就像直接进入时一样parent 作为初始 URL.

TIA

Answer 1

想帮忙，给点意见，所以才有了a working plunkr。关键是，它按原样工作。您甚至可以导航到直接 url（在地址栏中），它仍然有效：

http://run.plnkr.co/plunks/rQRG6ZpXLWADX9md1YV5/#/bara/register

这些链接也可以工作：

<a href="#/abc123">/abc123</a>
<a href="#/abc123/login">/abc123/login</a>
<a href="#/abc123/register">/abc123/register</a>

<a href="#/def456">/def456</a>
<a href="#/def456/login">/def456/login</a>
<a href="#/def456/register">/def456/register</a>

<a ui-sref="ep.perma({permalink:'xyz789'})">
<a ui-sref="ep.perma.login({permalink:'xyz789'})">
<a ui-sref="ep.perma.register({permalink:'xyz789'})">

检查它 here 并尝试比较代码中的不同之处。或使其损坏...继续并修复它。

始终如一地将 UI-Router 状态参数从 parent 传递到 child

Passing UI-Router state params from parent to child consistently

state

nested

params

angularjs

angular-ui-router