Угловой2. Как предотвратить изменение маршрута

У меня есть дочерний компонент в angular 2, который обрабатывает все маршруты после определенного уровня, маршрут определяется как этот в родительском компоненте.

@RouteConfig([
    { path: '/*other', name: 'Detail', component: DetailsViewComponent, useAsDefault: true },
])

Теперь в представлении сведений я хочу убедиться, что введенный URL-адрес действителен, и если не предотвратить изменение.

Использование routerCanDeactivate не работает, так как это вызывается только в том случае, если компонент удаляется из-за изменения маршрута, что не имеет места в этой реализации.

К сожалению, при просмотре API для Router наиболее API по-прежнему отсутствует документация.


angular angular2-routing
person Jesper Kristiansen    schedule 27.03.2016    source источник
comment
Вы говорите об обработке недействительного URL-адреса?   -  person micronyks    schedule 27.03.2016
comment
да, отчасти URL-адрес действителен, но последний фрагмент - нет. например .../details/a/b/c действителен, но .../details/a/b/d нет, представление сведений обрабатывает любой маршрутизатор после .../details/*. Он сделает запрос к серверной части, и если ответ будет 404, он должен предотвратить изменение URL-адреса.   -  person Jesper Kristiansen    schedule 27.03.2016
comment
о, кажется, renavigate() делает именно то, что мне нужно, только что попробовал простой тест. (надо было попробовать, прежде чем задавать вопрос.   -  person Jesper Kristiansen    schedule 27.03.2016
comment
Что вы подразумеваете под реанимацией()?   -  person micronyks    schedule 27.03.2016
comment
взгляните на @CanActivate, который вызывается перед изменение маршрута.   -  person Ankit Singh    schedule 27.03.2016

Ответы (1)


arrow_upward
2
arrow_downward

1.

Вы можете использовать @CanActivate на своих дочерних маршрутах, которые будут вызываться маршрутизатором для принятия решения об активации маршрута, следовательно, об изменении маршрута.

Использование:

import {checkValidUrl} from 'path/to/isUrlValid-service';

@Component({selector: 'control-panel-cmp', template: `<div>Settings: ...</div>`})

@CanActivate(){ //do your checking here and return true/false

    return checkValidUrl.isValid(document.url); 

    // isValid is your function to check the validity
}

class ChildComponent {
}

Но вам придется делать это с каждым ребенком.

2.

Если вам нужно одноразовое решение, вы можете создать собственное <custom-router-outlet>

как описано и реализовано здесь

person Ankit Singh    schedule 27.03.2016
comment
Должно быть, я делаю что-то не так. CanActivate вызывается, но URL-адрес по-прежнему устанавливается на новый utls, когда я возвращаю false. В качестве быстрого теста я попытался вернуть false, если для URL-адреса установлено значение .../'test', я ожидаю, что URL-адрес вернется к предыдущему URL-адресу, если я верну false, но этого не происходит. Я исправил это, отслеживая URL-адрес и вызывая _router.navigateByUrl(prevurl), если URL-адрес недействителен. Это работает, но было бы проще использовать CanActivate. - person Jesper Kristiansen; 28.03.2016
comment
это ограничение, с которым я также столкнулся и частично преодолел см. этот вопрос - person Ankit Singh; 28.03.2016
comment
Вы можете использовать router.events для проверки того, был ли запрещен доступ к маршруту, а затем перенаправить обратно. - person Terje; 19.08.2016