刷新页面时，如何在 Angular 上重新加载同一页面？

问题描述

我在服务器上的一个名为“final”的文件中保存了一个 angular 项目。当我有路径 https://www.SOMETHING.gr/rscheme/final 时，它会将我重定向到 https://www.SOMETING.gr/rscheme/final/pages/iot-dashbord，这是我想要的页面。当我刷新页面时，它返回“未找到”，因为路径是 https://www.SOMETING.gr/rscheme/final/pages/iot-dashbord。我应该怎么办？我想隐藏路径，以便路径保持为 https://www.SOMETHING.gr/rscheme/final

我的routing.module.ts

    import { RouterModule,Routes } from '@angular/router';
import { NgModule } from '@angular/core';

import { PagesComponent } from './pages.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ECommerceComponent } from './e-commerce/e-commerce.component';
import { NotFoundComponent } from './miscellaneous/not-found/not-found.component';

const routes: Routes = [{
  path: '',component: PagesComponent,children: [
    {
      path: 'dashboard',component: ECommerceComponent,},{
      path: 'iot-dashboard',component: DashboardComponent,{
      path: '',redirectTo: 'iot-dashboard',pathMatch: 'full',{
      path: '**',component: NotFoundComponent,],}];

@NgModule({
  imports: [RouterModule.forChild(routes)],exports: [RouterModule],})
export class PagesRoutingModule {
}

我的 main.module.ts

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

import {AppServices} from '../../services/rw.service'

@Component({
  selector: 'ngx-dashboard',styleUrls: ['./dashboard.component.scss'],templateUrl: './dashboard.component.html',providers: [AppServices]
})
export class DashboardComponent implements OnInit {

  report:number;
  park:number;
  use:number;
  group:number;
  privateplin:number;
  privateplus:number;
  commonprivateplus:number;
  ownerfirst:number;
  ownersecond:number;
  ownerthird:number;
  first:number;
  second:number;
  fin:any;
  constructor(private appService: AppServices){}
  ngOnInit() {
    this.appService.getJSON().subscribe(

      data=>{
           this.report=data.report
           this.park=data.park 
           this.use=data.use
           this.group=data.group
           this.privateplin=data.privateplin
           this.privateplus=data.privateplus
           this.commonprivateplus=data.commonprivateplus
           this.ownerfirst=data.ownerfirst
           this.ownersecond=data.ownersecond
           this.ownerthird=data.ownerthird
           this.first=data.first
           this.second=data.second
      },error => {
        window.alert("Δεν μπορούν να πρβληθούν οι ισχύοντες πόντοι");
      console.error(error);
      },);
  }

  set(preport,ppark,puse,pgroup,pprivateplin,pprivateplus,pcommonprivateplus,pownerfirst,pownersecond,pownerthird,pfirst,psecond){
        let report=preport.value;
        let park=ppark.value;
        let use=puse.value;
        let group=pgroup.value;
        let privateplin=pprivateplin.value;
        let privateplus=pprivateplus.value;
        let commonprivateplus=pcommonprivateplus.value;
        let ownerfirst=pownerfirst.value;
        let ownersecond=pownersecond.value;
        let ownerthird=pownerthird.value;
        let first=pfirst.value;
        let second=psecond.value;

        this.fin={
          "report":report,"park": park,"use": use,"group":group,"privateplin":privateplin,"privateplus":privateplus,"commonprivateplus":commonprivateplus,"ownerfirst":ownerfirst,"ownersecond":ownersecond,"ownerthird":ownerthird,"first":first,"second":second        
      };

      this.appService.postJSON(this.fin).subscribe(response=>{

        window.alert("Επιτυχής ανανέωση στοιχείων");


      },error => {
        
        console.error(error);
        
      },);


  }
  
}

解决方法

这是因为 angular 的工作原理。将只有一个索引文件，并根据需要加载所需的视图。因此，当请求任何其他路径时，它会导致服务器返回 404（错误），因为它无法识别路径“iot/dashboard”。

所以需要配置服务器在404s上返回index.html。加载 index.html 后，它将根据路由处理加载。实际配置将取决于您使用的服务器。

请检查部署 SPA。