Угловой - как всегда приземляться на стартовой странице при обновлении браузера с дополнительного маршрута - PullRequest
Новая
       16

Угловой - как всегда приземляться на стартовой странице при обновлении браузера с дополнительного маршрута

2 голосов
/ 06 июля 2019

У меня простой сценарий.Мое приложение запускается с компонента по умолчанию, скажем, StartComponent , который достигается через маршрутизатор Angular по маршруту start .Так что в панели браузера я вижу что-то вроде myhost/start.

. Логика приложения переносит меня на второй компонент, SecondComponent , когда я перехожу к маршруту с именем .второй , поэтому в панели браузера я вижу myhost/second.

Если сейчас я обновлю браузер, например, через Command-R или Ctrl-F5 , я снова нахожусь на SecondComponent .

Хотя мне бы хотелось, чтобы это произошло, так как обновление браузера приноситЯ снова StartComponent независимо от того, откуда я делаю обновление.

Какой самый чистый способ достичь этого поведения?

1 Ответ

2 голосов
/ 06 июля 2019

Это в основном та же стратегия, что и перенаправление на вход в систему, если пользователь не вошел в систему. Вы можете использовать CanActivate, который выполняет перенаправление маршрутизатора, но не блокирует изменение маршрута (т. Е. Всегда разрешает true). 

@Injectable()
export class CanActivateStart implements CanActivate {
    public constructor(private _router: Router) {

    }

    public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        if(!(route.component instanceof StartComponent)) {
           this._router.navigateByUrl('/start'); 
        }
        return true;
    }

}

Может показаться странным всегда возвращать true, но если вы вернете false, это отменяет изменение маршрута и в то же время блокирует navigateByUrl().

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

const routes = [
     {
        canActivate: [CanActivateStart],
        children: [
           // the routes you want to force a redirect
        ]
     }, {....}
]
...