Ответ 1
Подход с динамическим параметром:
Взгляните на этот документ: params.paramdeclaration # dynamic. Возможно, это то, что вы ищете: ...a transition still occurs....
Когда динамическое значение истинно, изменения значения параметра не приводят к вводу/выходу состояния. Решения не будут повторно загружены, и просмотры не будут перезагружены.
Обычно, если значение параметра изменяется, состояние, в котором объявлено, что параметр будет перезагружен (введен/вышел). Когда параметр является динамическим, переход все еще происходит, но он не вызывает состояние выхода/ввода.
Это может быть полезно для создания пользовательского интерфейса, где компонент обновляется при изменении значений параметра. Общим сценарием, где это полезно, является поиск/разбиение на страницы/сортировка.
Обратите внимание, что вы не сможете включить такую логику в свое решение внутри $stateProvider.state. Я бы сделал это, используя параметры dynamic, чтобы предотвратить перезагрузку состояния. К сожалению, правила dynamic не работают, когда вы пытаетесь обновить свое состояние (например, с помощью $stage.go()) внутри части решения. Поэтому я переместил эту логику в контроллер, чтобы она работала хорошо - DEMO PLNKR.
Так как userId является динамическим параметром, представление не возвращается и не возвращается снова, когда оно было изменено.
Определите свой динамический параметр:
$stateProvider.state('userlist.detail', {
url: '/:userId',
controller: 'userDetail',
controllerAs: '$ctrl',
params: {
userId: {
value: '',
dynamic: true
}
},
template: `
<h3>User {{ $ctrl.user.id }}</h3>
<h2>{{ $ctrl.user.name }} {{ !$ctrl.user.active ? "(Deactivated)" : "" }}</h2>
<table>
<tr><td>Address</td><td>{{ $ctrl.user.address }}</td></tr>
<tr><td>Phone</td><td>{{ $ctrl.user.phone }}</td></tr>
<tr><td>Email</td><td>{{ $ctrl.user.email }}</td></tr>
<tr><td>Company</td><td>{{ $ctrl.user.company }}</td></tr>
<tr><td>Age</td><td>{{ $ctrl.user.age }}</td></tr>
</table>
`
});
Ваш контроллер:
app.controller('userDetail', function ($transition$, $state, UserService, users) {
let $ctrl = this;
this.uiOnParamsChanged = (newParams) => {
console.log(newParams);
if (newParams.userId !== '') {
$ctrl.user = users.find(user => user.id == newParams.userId);
}
};
this.$onInit = function () {
console.log($transition$.params());
if ($transition$.params().userId === '') {
UserService.list().then(function (result) {
$state.go('userlist.detail', {userId: result[0].id});
});
}
}
});
Обработать новые параметры с помощью $transition.on* крючков при запуске изменения маршрута:
Другой подход заключается в настройке правильного параметра state перед тем, как вы перейдете в свое состояние. Но вы уже сказали, это то, чего вы не хотите. Если бы я столкнулся с одной и той же проблемой: я попытался бы установить правильный параметр state перед изменением вида.
app.run(function (
$transitions,
$state,
CalendarService
) {
$transitions.onStart({}, function(transition) {
if (transition.to().name === 'mySate' && transition.params().firstAvailableDate === '') {
// please check this, I don't know if a "abort" is necessary
transition.abort();
return CalendarService.getAvailableDates().then(function(response){
// Since firstAvailableDate is dynamic
// it should be handled as descript in the documents.
return $state.target('mySate', {firstAvailableDate : response[0]});
});
}
});
});
Обработать новые параметры с помощью $transition.on* крючков при запуске изменения маршрута через redirectTo
Примечание: redirectTo обрабатывается как крюк onStart, до разрешения LAZY.
Это делает то же самое, что указано выше рядом с заголовком " обрабатывать новые параметры с помощью $transition.on* крючков при запуске изменения маршрута", поскольку redirectTo также является onStart крюком с автоматическим управлением,
$stateProvider.state('myState', {
parent: 'baseState',
url: '/calendar?firstAvailableDate',
template: 'calendar.html',
controller: 'CalendarController',
controllerAs: 'calendarCtrl',
redirectTo: (trans) => {
if (trans.params().firstAvailableDate === '') {
var CalendarService = trans.injector().get('CalendarService');
return CalendarService.getAvailableDates().then(function(response){
return { state: 'myState', params: { firstAvailableDate: response[0] }};
});
}
}
});