Question

我是Angular的新手，我正在尝试使路由器正常工作。基本上，我在http://localhost:4200有一个主页，该路由器具有指向http://localhost:4200/courses的路由器链接，该链接可以正常工作，但是当我重新加载http://localhost:4200/courses（或输入地址）后，它将带我回到主页，然后如果我再次单击路由器链接，它将带我到http://localhost:4200/courses/courses，与http://localhost:4200/courses相同，但这似乎是错误的。另外，如果我输入http://localhost:4200/courses/，则会收到404错误。如果有人对如何解决此问题有任何建议，我将不胜感激！

我的app-routing.module.ts是：

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>UW-Madison Course Reviews</h1>
<div>
  <nav>
    <a [routerLink]="'/courses'"> Courses </a>
  </nav>
  <router-outlet></router-outlet>
</div>

我的course.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文件是：

<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>
</html>

感谢您的任何帮助！

Answer 1

也许您应该检查一下index.html以查看为基本href设置了什么。我遇到了相同的问题和设置：

<base href="./">

解决了这个问题。我知道这篇文章已经过时了，但可能会对其他人有所帮助。

Answer 2

如果仍然有人在寻找这个问题的答案（重新加载并出现错误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

Answer 3

一切似乎都是正确的，但我认为您会错过一些东西-尝试添加空路径并将其重定向到这样的任何路径

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

我认为这段代码丢失了-添加此代码后检查场景

如果您不使用HomeComponent，则可以使用redirectTo: 'courses'和pathMatch: 'full'

快乐编码：）

Answer 4

您是否尝试过在routerLink中使用[]封装链接？

我的app.component.html是：

<h1>UW-Madison Course Reviews</h1>
<div>
  <nav>
    <a [routerLink]="['/courses']"> Courses </a>
  </nav>
  <router-outlet></router-outlet>
</div>

如何修复角度路线无法重新加载

4 个答案: