使用 ui-router 如何使两个不同状态的嵌套实例具有自己的保留路由？

Question

我有一个需要嵌套状态的页面。但不是嵌套在所有 google 搜索结果返回的术语中。我已经在使用它并且没有任何问题。我可以用一系列图片来解释它。

这是我当前设置的页面

现在，当我点击上面的一个小部件时，对于这个例子，假设我点击了 notes 小部件，这是第四个选项。将出现以下页面

现在发生的是我完全过渡到一个新状态，我的 url 从 myurl.com/call/{{assessorId}}/process/processType?=1 变为 myurl.com/assessor/{{assessorId}}/detail/notes

我需要做的是让第二张图片中的屏幕出现但在第一张屏幕的下半部分内，就像我在 MS Paint 中通过一些裁剪拼凑而成的这张图片

屏幕的下半部分有自己独立的 url，ui-router 需要在您从一个小部件移动到另一个小部件时进行跟踪和跟随。显示 {{assessorName}} | Notes 的标题栏是一个 home-brew 面包屑解决方案，可以导航回原始的小部件集。

所以我向下导航，但是我没有办法将该状态的实例保留在我当前的状态中。相反，我离开我的 assessor.call 状态并过渡到我的 assessor.detail.notes 状态。

如何保持我的 assessor.call 状态，并嵌套我的

assessor.detail.{{selectedWidget}}页面底部状态里面?

Answer 1

您可以在单个 html 页面中使用多个 ui-view，例如

<div class="content">
  <div class="header" ui-view="header"></div>
  <div class="main" ui-view="main"></div>
  <div class="footer z-depth-3" ui-view="footer"></div>
</div>

现在您可以为每个 ui 视图拥有单独的 视图、控制器、sass/css。假设我有一个模块组织，它包含三个部分，页眉、页脚和主要部分，然后在它的 js 中我将编写

$stateProvider.state('home.organisation',
            {
                url: '^/organisation',                   
                views: {
                    'header@home': {
                        templateUrl: 'navbar@organisation.html',
                        controllerAs: 'organisationNavbar',
                        controller: 'OrganisationNavbarCntrl'
                    },
                    'main@home': {
                        templateUrl: 'organisation.html',
                        controllerAs: 'organisation',
                        controller: 'OrganisationCntrl'
                    },
                    'footer@home': {
                        templateUrl:'footer@organisation.html',
                        controllerAs: 'organisationFooter',
                        controller: 'OrganisationFooterCntrl'
                    }
                }
            });

使用 ui-router 如何使两个不同状态的嵌套实例具有自己的保留路由？

With ui-router how do I make nested instances of two different states with their own preserved routes?

html

javascript

angularjs

typescript

angular-ui-router