在Angular中重新加载页面后如何保持在同一页面

Question

几天前我开始学习 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（浏览器页面重新加载），我的应用程序会忘记我的第二个页面并加载默认页面。 所以，我不知道如何在页面重新加载后留在另一个页面上，是否可以这样做。

附： - 我试图找到有关它的任何信息，但我找到的所有解决方案都没有帮助我。

谢谢！

更新： 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']);
  }
}

Answer 1

您总是被重定向到您的 main 路由，因为您在根组件中指定导航到 main 路由。

每次重新加载应用时，其路由状态都会丢失。所以你应该从你的根组件中删除它。我不明白你为什么要那样做。

如果您希望默认使用 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}
];