ui-router 嵌套状态未解析

Question

在这里，我尝试将 ui-router 的嵌套状态解析为父状态也在使用的相同 ui-view 元素。 由于钩子显示状态已解析但组件/模板未解析。

嵌套状态：

{ 
  name: 'people', 
  url: '/people', 
  component: 'people',
  resolve: {
    people: function(PeopleService) {
      return PeopleService.getAllPeople();
    }
  }
},

{ 
  name: 'people.person', 
  url: '/people/{personId}', 
  component: 'person',
  resolve: {
    person: function(PeopleService, $transition$) {
      return PeopleService.getPerson($transition$.params().personId);
    }
  }
}

'people' 和 'people.person' 都试图解析到相同的 ui-view 元素

有没有办法将子状态的模板加载到同一个ui-view元素？ 请指导我正确实施。

PLUNKER

Answer 1

根据我对 ui-view 和嵌套资源的理解/经验，您有两种选择：

1) 将它们从嵌套中移除（尽管可能不是最好的），您可以使用适当的配置来模拟嵌套。这是一个例子 这种类型：https://plnkr.co/edit/8MtCk0rPRy4CaEjsPDe8?p=preview

主要变化有：

a) 移除嵌套：

name: 'people.person', 

变成

name: 'person', 

b) 从模板中移除嵌套：

'<a ui-sref="people.person({ personId: person.id })">' +

变成

'<a ui-sref="person({ personId: person.id })">' +

2) 使用命名视图，您可以使用以下命令强制 people.person 进入相同命名的 ui-view：

https://plnkr.co/edit/qWS7SjJ9PNytQFjZRDr3?p=preview

a) 将所有组件：'componentName' 更改为

views: {'!content': 'componentName'}