javascript - 错误 错误 : Uncaught (in promise): Error: Cannot match any routes. URL 段: 'employees' E

Question

我正在研究 Angular 7 并遇到以下错误。

错误；

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'employees'
Error: Cannot match any routes. URL Segment: 'employees'
    at ApplyRedirects.noMatchError (router.js:3410)
    at CatchSubscriber.selector (router.js:3374)
    at CatchSubscriber.error (catchError.js:29)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at TapSubscriber._error (tap.js:56)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:30873)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { EmployeeComponent } from './employee/employee.component';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Employee, HttpClientService } from './service/http-client.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  employees: Employee[];

  constructor(private httpClientService: HttpClientService) { }

  ngOnInit() {
    this.httpClientService.getEmployees().subscribe(
      respose => {
        this.employees = respose;
      }
    );
  }
}

http-client.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export class Employee {
    constructor(
        public empId: string,
        public name: string,
        public designation: string,
        public salary: string,
    ) { }
}

@Injectable({
    providedIn: 'root'
})
export class HttpClientService {

    constructor(private httpClient: HttpClient) {   }

    getEmployees() {
        console.log('Test Calls');
        return this.httpClient.get<Employee[]>('http://localhost:8080/employees');
    }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EmployeeComponent } from './employee/employee.component';

const routes: Routes = [
    { path: '', component: EmployeeComponent }
];

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

employee.component.html

<div class="col-md-6">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>designation</th>
      </tr>
    </thead>

    <tbody>
      <tr *ngFor="let employee of employees">
        <td>{{ employee.name }}</td>
        <td>{{ employee.designation }}</td>
        <tr>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

您没有员工路由，只需在路由模块中添加员工路由

const routes: Routes = [
    { path: '', component: EmployeeComponent },
    { path: 'employees', component: EmployeeComponent }
];