具有默认视图的 angular-ui/ui-router 父状态

Question

我正在尝试在 3 列布局中定义状态，左列具有相同的内容。但此时，我不得不对所有直接嵌套的状态重复 templateUrl。

.state('workspace', {
  url: '/',
  templateUrl: 'app/workspace/workspace.view.html'
})
.state('workspace.images', {
  url: 'images',
  views: {
    'sidebar': { 
      templateUrl: 'app/workspace/sidebar.view.html',
      controller : 'Workspace.SidebarController as vm'
    },
    'content': {
      templateUrl: 'app/workspace/imageslist.view.html',
      controller : 'Workspace.ImagesListController as vm'
    }
  }
})
  .state('workspace.images.edit', {
    url: '/:key',
    templateUrl: 'app/workspace/editor.view.html',
    controller : 'Workspace.EditorController as vm'
  })
.state('workspace.documents', {
  url: 'documents',
  views: {
    'sidebar': { 
      templateUrl: 'app/workspace/sidebar.view.html',
      controller : 'Workspace.SidebarController as vm'
    },
    'content': {
      templateUrl: 'app/workspace/documentslist.view.html',
      controller : 'Workspace.DocumentsListController as vm'
    }
  }
});

如您所见，我每次都必须重复“侧边栏”模板。我希望能够从抽象的 workspace 状态对其进行配置。

workspace.view.html 包含 “sidebar” 和 “content” 视图：

<div class="sidebar" ui-view="sidebar">
      <!-- view = sidebar -->
</div>
<div class="content" style="height: 100%" ui-view="content">
      <!-- view = content-->
</div>

我想我应该有一个 views 对象进入 "workspace" 状态来定义 "sidebar" 模板和控制器并留下 " 内容" 为空。 并尝试了有和没有命名视图，但没有成功。当我这样做时，侧边栏模板永远不会显示，但似乎已加载（错误的名称会导致我的控制台中出现 404）。

Answer 1

这会将侧边栏注入父级...并且子级可以使用它甚至更改它：

.state('workspace', {
  url: '/',
  views: {
    '': { templateUrl: 'app/workspace/workspace.view.html' }
    'sidebar@workspace': { 
      templateUrl: 'app/workspace/sidebar.view.html',
      controller : 'Workspace.SidebarController as vm'
    },
  }
})
.state('workspace.images', {
  url: 'images',
  views: {
    'content': {
      templateUrl: 'app/workspace/imageslist.view.html',
      controller : 'Workspace.ImagesListController as vm'
    }
  }
})
...

我们甚至在父状态上也使用了views : {}。默认未命名的是原来的workspace.view.html

我们还添加了命名视图 'sidebar@workspace' - 这里的绝对名称意味着名称是“侧边栏”，其目标在“工作区”状态模板中搜索