Javascript 具有默认视图的角度ui/ui路由器父状态

我试图在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.view.html包含“侧栏”和“内容”视图：

我认为我应该将

视图

对象置于“工作区”状态，以定义“侧栏”模板和控制器，并将“内容”留空。

---

尝试了命名视图和未命名视图，但均未成功。当我这样做时，边栏模板永远不会显示，但似乎已加载（错误的名称会导致我的控制台中出现404）。

这会将边栏插入父级。。。儿童可以使用它，甚至可以更改它：

.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'
    }
  }
})
...

我们甚至在父状态上使用了

视图：{}

。默认未命名的是原始workspace.view.html

---

我们还添加了命名视图

'sidebar@workspace“

-此处的绝对名称表示名称为“侧栏”，其目标在“工作区”状态模板中搜索

，非常感谢。为什么我们应该使用绝对名称而不是本地名称？我想保留

abstract

属性，以表明它不能按原样使用，这会改变某些内容还是不建议使用？

.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'
    }
  }
})
...