Как использовать компоненты angular 1.5 с состояниями ui-router

Прямо сейчас в проекте angular ui-router не было ничего явного о компонентах angular 1.5. Мое требование к проекту - использовать вложенные состояния, и я хочу использовать компоненты angular 1.5, чтобы легко перейти на angular 2. Я ищу лучший шаблон для обоих. Поддерживаются варианты 1,2 и 4 по ссылке ниже. Я хочу знать, что является оптимальным вариантом для вложенных состояний и для перехода на angular 2.

компоненты Angular 1.5 с вложенными состояниями


angularjs angular-ui-router angularjs-components angularjs-1.5
person manikawnth    schedule 28.06.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я только что поделился этим решением с приятелем. Не уверен, что он соответствует вашим точным требованиям, но с UI-Router 1.0.0 вы можете маршрутизировать непосредственно к компоненту. Чтобы сделать еще один шаг вперед, с вложенными состояниями мы можем указать конкретный компонент в именованном представлении. Затем мы связываемся с нашим дочерним состоянием в разметке, используя ui-sref. Когда это состояние становится активным, активируется и компонент его представления.

Если вы хотите сделать эти представления динамическими, скажем, на основе роли пользователя, вы можете использовать функцию templateProvider. Однако с помощью templateProvider вы не можете использовать компонент для определения представления, поэтому вам, возможно, придется просто вернуть тег компонента.

e.g. <editAdminProfileForm></editAdminProfileForm>

Подробнее об условных представлениях с помощью templateProvider см. мой другой ответ здесь: Angularjs ui-router : условные вложенные представления имени

А вот еще немного информации о UI-Router с компонентами:
https://ui-router.github.io/guide/ng1/route-to-component
https://ui-router.github.io/docs/latest/interfaces/ng1.ng1statedeclaration.html#component

app.js

...

.state('app', {
  abstract: true,
  templateUrl: 'templates/user-profile.html',
})

.state('app.profile', {
  url: '/profile',
  views: {
    'profile': {
      component: 'userProfile'
    }
  }

})

.state('app.profileEdit', {
  views: {
    'editProfile': {
      component: 'editProfileForm'
    }
  }
});

user-profile.html

<ui-view>
  <div ui-view="profile"></div>
  <div ui-view="editProfile"></div>
</ui-view>

user-profile-component.js
profile-edit-component.js

yourApp.component('userProfile', { ... });

yourApp.component('editProfileForm', { ... });

user-profile-component.html

<button type="button" ui-sref="app.profileEdit()">Edit Profile</button>
person Desmond    schedule 20.12.2016
comment
Спасибо. Именно это я и имел в виду. Наконец, ui-router включил это. Спасибо, что обратили на меня внимание - person manikawnth; 20.12.2016
comment
Рад, что это может помочь. Обратите внимание, что в этой публикации UI-Router 1.0.0 все еще находится в стадии бета-тестирования. Если вы находитесь на ~ 1.0.0, вам нужно вызвать компонент как шаблон. template: '<edit-profile-form></edit-profile-form>' - person Desmond; 21.12.2016