состояние вложенного UI-маршрутизатора не разрешается

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" пытались разрешить один и тот же элемент пользовательского интерфейса

Есть ли способ загрузить шаблон дочернего состояния в тот же элемент пользовательского интерфейса? Пожалуйста, направьте меня к правильной реализации.

PLUNKER

Answer 1

Из моего понимания / опыта работы с пользовательским интерфейсом и вложенными ресурсами у вас есть два варианта:

1) Извлеките их из вложенности (хотя, вероятно, не из лучших), которую вы можете имитировать, используя собственную конфигурацию. Вот пример этого типа: https://plnkr.co/edit/8MtCk0rPRy4CaEjsPDe8?p=preview

Основные изменения:

а) Удаление вложенности:

name: 'people.person', 

становится

name: 'person', 

б) Удаление вложенности из шаблона:

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