Angular UI Router-在不了解第二级嵌套视图的情况下更改第三级嵌套视图

Angular-UI-Router - change 3rd level nested view without knowing about 2nd level nested view

本文关键字：视图 嵌套 二级 情况下 第三级 Router- UI 不了解 Angular      更新时间：2023-09-26

我有几个"父模块"，比如

  • 用户
  • 社区

我也有"可嵌入模块"，比如

  • 照片
  • 视频
  • wiki

我的可嵌入模块可以嵌入到父模块中。并非所有模块都具有交叉依赖关系。例如，用户不知道他有照片、视频和wiki，但知道他有一个可嵌入模块的列表，这些模块将嵌入到他的页面中。而照片、视频和维基也不知道它们会嵌入到哪里。

我有三层观点：-基本视图层（顶部导航栏、徽标等）-关心父视图（不知道是哪一个，被注入）-父对象视图层（可以是用户、社区或页面，例如保存用户照片和名称）-关心他的可嵌入视图（不知道它们是，被注入）-嵌入式视图层-关心他的视图内部的内容

现在假设我在用户页面上。用户路由为#/user。现在我想通过链接访问用户的照片，例如<a href="#/user/photos/">user photos</a>，但我做不到，因为在照片模块中，路线名称是#/photos，所以#/user/photos/不起作用。

如果我只访问<a href="#/photos">user photos</a>，它将删除父视图（父对象视图层，例如，将从屏幕上删除用户照片和名称）。

有什么想法可以访问照片模块并保持父视图，并且不创建硬编码的依赖关系吗？

我需要这样的东西：

$stateProvider
   .state(':parent/photos', {
            url: ':parent/photos',
            templateUrl: 'modules/photos/index.html',
            controller: 'PhotosCtrl'
       })

并在用户页面中使用<a href="#/user/photos">user photos</a>或者在社区页面中使用<a href="#/community/photos">community photos</a>

则照片模块可以使用：parent参数来确定其父

或者至少我需要链接功能，比如：

$stateProvider.state('user.photos', /*&*/'photos')

以在全局级别上链接模块。

您对GalleryStateFactory的想法是合理的。。。但我建议您将其添加为提供商。。。这将允许它依赖于$stateProvide，你可以做一些类似的事情：

mod.provider('$galleryState', ['$stateProvider', function(sp) {
  this.galleryStates = function(parent) {
    sp.state(parent+'.gallery', GalleryStateFactory.default)
      .state(parent+'.gallery.photos', GalleryStateFactory.photos)
      .state(parent+'.gallery.albums',GalleryStateFactory.albums);
  }

  this.$get = angular.noop; //unless you wan't some service as well...
}]
$galleryStateProvider
    .galleryStates('user')
    .galleryStates('community');
相关文章：