Как остаться на той же странице после перезагрузки страницы в Angular - PullRequest
Новая
       78

Как остаться на той же странице после перезагрузки страницы в Angular

0 голосов
/ 01 мая 2020

несколько дней go Я начал изучать Angular и пытался сделать простое SPA. Я добавил 2 компонента и маршрутизацию для них: 

const appRoutes: Routes = [
  {path: 'main', component: MainPageComponent}, //default page
  {path: 'registration-form', component: RegistrationPageComponent}, //"another" page
  {path: 'login-form', component: LoginPageComponent},
  {path: '**', component: PageNotFoundComponent}
];

Итак, у меня есть маршрутизация по умолчанию на главную страницу и кнопка на ней, которая переходит на другую страницу (компонент): 

<button style="border-color: transparent;"  type="button"
        class="item7 btn btn-secondary btn-pill" [routerLink]="['/registration-form']">
   <i class="fa fa-sign-in mr-2"></i>
   {{logButtonTitle}}
</button>

Когда я нажимаю на эту кнопку, она успешно перемещает меня на другую страницу (компонент), но если я нажимаю f5 на другой странице (перезагрузка страницы браузера), мое приложение забывает вторую страницу и загружает страницу по умолчанию. Итак, я не знаю, как остаться на другой странице после перезагрузки страницы и могу ли я это сделать вообще. PS - я пытался найти какую-либо информацию об этом, но все решения, которые я нашел, не могут мне помочь. Спасибо!

Обновление: код в app.components.ts Здесь я всегда загружаю страницу по умолчанию при запуске приложения 

import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  constructor(
    private router: Router
  ) {}

  ngOnInit(): void {
    this.router.navigate(['/main']);
  }
}

1 Ответ

0 голосов
/ 01 мая 2020

Вы всегда перенаправлены на свой маршрут main, потому что вы указываете в своем root компоненте для перехода к маршруту main.

Каждый раз, когда приложение перезагружается, его состояние маршрутизации теряется. Поэтому вы должны удалить это из вашего root компонента. Я не понимаю, почему вы так делаете.

Если вы хотите, чтобы маршрут main использовался по умолчанию, в вашем модуле маршрутизации добавьте: 

const appRoutes: Routes = [
  // first line redirects to '/main' instead of '/'
  {path: '', redirectTo: 'main',
  {path: 'main', component: MainPageComponent}, //default page
  {path: 'registration-form', component: RegistrationPageComponent}, //"another" page
  {path: 'login-form', component: LoginPageComponent},
  {path: '**', component: PageNotFoundComponent}
];
...