当我在 Angular 中单击后退按钮时，我无法导航到索引页面

Question

我有 Angular 项目。 在索引页上我有一些按钮，这让我进入了另一个页面。 当我想 go 返回索引页时，我单击浏览器的后退按钮，然后出现一个白页，而不是我的索引页。 你有同样的问题吗？

Answer 1

据我所知，这不是 angular 路由的问题。 我建议检查路由配置是否正确。

假设您已经在您的项目中设置了 angular 路由 ( this )，您必须确保正确注册索引页面的路由。 在你的app-routing.module.ts中应该有这样的东西：

const routes: Routes = [
  { path: 'another-page', component: AnotherPageComponent },
  { path: '', component: IndexPageComponent },
  { path: '**', redirectTo: '' }
]

在您的app.module.ts中，确保已导入BrowserModule和AppRoutingModule 。

如果 angular 路由配置正确，你可以启用路由调试来查找问题。 其他答案表明这可能会有所帮助（此处，此处）。

Answer 2

我通过以下方式解决了这个问题：我给了我的索引页（app.component.html）class“mainPage”

<div class="mainPage" #mainPage>
... // index page
</div>

然后我在 app.component.ts 中写了如下代码：

export class AppComponent implements OnInit{
  @ViewChild('mainPage') buttons!: ElementRef;
  constructor(private renderer: Renderer2, private el: ElementRef, private router: Router){
      
    router.events.subscribe((eve : any )=>{
        this.currentRoute = router.url;
        if(this.currentRoute == '/'){
          this.showIndex();
        } 
      });
  }
  
  currentRoute : string = "";\
ngOnInit(): void {

  }
  hideIndex(){
    this.renderer.addClass(this.buttons.nativeElement, "d-none");
  }
  showIndex(){
    this.renderer.removeClass(this.buttons.nativeElement, "d-none");
  }
  title = '';
}