angular - 如何修复无法重新加载的 Angular 路线

Question

我是 Angular 的新手，我正在尝试让我的路由器工作。基本上我在 / 有一个主页，其中有一个到 /courses 的路由器链接，它运行良好，但是当我重新加载 /courses 时(或输入地址in) 它带我回到主页，如果我再次单击路由器链接，它会将我带到与 /courses 相同的 /courses/courses 但这似乎错了。此外，如果我输入 /courses/ 则会收到 404 错误。

如果有人对如何解决此问题有任何建议，我将不胜感激!

// app-routing.module.ts is:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {CoursesComponent} from './courses/courses.component';
import {ReviewsComponent} from './reviews/reviews.component';
import { CommonModule } from '@angular/common';

const routes: Routes = [
  {
    path: 'courses',
    component: CoursesComponent
  },
  {
    path: 'courses/:id',
    component: ReviewsComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes),
  CommonModule],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<!-- app.component.html -->
<h1>Course Reviews</h1>
<div>
  <nav>
    <a [routerLink]="'/courses'">Courses</a>
  </nav>
  <router-outlet></router-outlet>
</div>

//courses.component.ts

import {Component, OnInit } from '@angular/core';
import { CourseService } from '../services/course.service';
import { Router} from '@angular/router';
import { AddCourseComponent } from '../add-course/add-course.component';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.css']
})

export class CoursesComponent implements OnInit {
  dataSource  = [];
  responseArray: string;
  courseList = new Array<Course>();
  selectedCourse: Course;


  constructor(private courseService: CourseService,
              private router: Router,
              private modalService: NgbModal) {
    this.courseService.newDataAdded.subscribe(
      (st: string) => {
        this.fetchCourses();
      }
    );
  }

  ngOnInit() {
    this.fetchCourses();
  }

  fetchCourses(): void {
    this.courseService.getFirstPage().subscribe((data: Array<object>) => {
      this.dataSource  =  data;
      this.responseArray = JSON.stringify(data);
      const obj: MyObj = JSON.parse(this.responseArray);
      for (const i of obj.results) {
        const courseObj: string = JSON.stringify(i);
        const course: Course = JSON.parse(courseObj);
        this.courseList.push(course);
      }
    });
  }
  onSelect(course: Course): void {
    this.selectedCourse = course;
    console.log('selected course is ' + this.selectedCourse.course_name);
    this.router.navigate(['/courses', this.selectedCourse.id]);
  }
  onButtonClick(): void {
    const modalRef = this.modalService.open(AddCourseComponent);
    modalRef.result.then((result) => {
      console.log(result);
      this.courseService.newDataAdded.emit('new data added successfully');
    }).catch((error) => {
      console.log(error);
    });
  }
}

interface MyObj {
  count: number;
  next: string;
  previous: string;
  results: Array<string>;
}

HTML 文件是:

<ul>
  <li *ngFor="let course of courseList" (click)="onSelect(course)">
    <span class="badge">{{course.department}}</span> <a [routerLink]="['/courses', course.id]"> {{course.course_name}} </a>
  </li>
</ul>
<button type="button" class="btn btn-med btn-outline-primary" (click)="onButtonClick()">Add a new course</button>

提前感谢您的帮助!

Answer 1

如果有人仍在寻找此问题的答案(重新加载并收到错误 404 时):在定义路由的 app-routing.module.ts 中，只需添加

@NgModule({imports: [RouterModule.forRoot(routes, { useHash: true })]

在这种情况下，上面的代码如下所示:

@NgModule({
  imports: [RouterModule.forRoot(routes,  { useHash: true }),
  CommonModule],
  exports: [RouterModule]
})

学分: https://medium.com/wineofbits/angular-2-routing-404-page-not-found-on-refresh-a9a0f5786268