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视图和嵌套资源的了解/经验，您有两个选择：

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视图：

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

a）将所有组件：“ componentName”更改为

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

ui-router嵌套状态无法解析

1 个答案: