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

Question

我有一个 angular 项目保存在服务器上名为 'final' 的文件中。当我有路径 https://www.SOMETHING.gr/rscheme/final it redirects me to https://www.SOMETING.gr/rscheme/final/pages/iot-dashbord which is the page that I want. When I refresh my page it returns me "not found" beacause the path is https://www.SOMETING.gr/rscheme/final/pages/iot-dashbord. What should I do? I want to hide the path so the path to remain as 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);
        
      },
      );


  }
  
}

Answer 1

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

因此您需要将服务器配置为return index.html on 404s。加载 index.html 后，它将根据路线负责加载。实际配置将取决于您使用的服务器。

请检查部署 SPA。

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

How can I reload same page on Angular when I refresh page?

angular

path

hide