Angular 参数未定义的角度2布线

我正在尝试在Angular 2中创建一个路由，根据id将我带到json文件的数据。例如，我有10001.json、10002.json、10003.json等等

人们应该能够通过键入特定id作为url来访问patientfile，但到目前为止，这还不起作用。我实际上得到了：

找不到获取404

这是我的patientcomponent：

import { Component, OnInit } from '@angular/core';
import {PatientService} from "../patient.service";
import {Patient} from "../models";
import {ActivatedRoute, Params} from "@angular/router";
import 'rxjs/add/operator/switchMap';

@Component({
  selector: 'app-patient',
  templateUrl: './patient.component.html',
  styleUrls: ['./patient.component.sass']
})
export class PatientComponent implements OnInit {

  patient:Patient[];
  id:any;

  errorMessage:string;

  constructor(private patientService:PatientService, private route: ActivatedRoute) { }

  ngOnInit():void {
    this.getData();
    this.id = this.route.params['id'];
    this.patientService.getPatient(this.id)
      .subscribe(patient => this.patient = patient);

  }

  getData() {
    this.patientService.getPatient(this.id)
      .subscribe(
        data => {
          this.patient = data;
          console.log(this.patient);
        }, error => this.errorMessage = <any> error);


  }
}

以及服务：

import { Injectable } from '@angular/core';
import {Http, RequestOptions, Response, Headers} from '@angular/http';
import {Observable} from "rxjs";
import {Patient} from "./models";

@Injectable()
export class PatientService {
  private patientUrl = "/assets/backend/patienten/";
  constructor(private http: Http) { }

  getPatient(id:any): Observable<Patient[]>{
    return this.http.get(this.patientUrl + id + '.json' )
        .map(this.extractData)
        .catch(this.handleError);
  }


  private extractData(res: Response) {
    let body = res.json();
    return body || { };
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }

  addPatient(afdelingsNaam: string, afdeling: any): Observable<Patient> {
    let body = JSON.stringify({"afdelingsNaam": afdelingsNaam, afdeling: afdeling});
    let headers = new Headers({'Content-Type': 'application/json'});
    let options = new RequestOptions({headers: headers});
    return this.http.post(this.patientUrl, body, options)
      .map(res => <Patient> res.json())
      .catch(this.handleError)
  }
}

---

您需要将这些文件作为静态资源提供给angular应用程序，否则angular路由器将尝试将这些请求路由到您的应用程序内路由，而应用程序内路由没有匹配的路由

您可以通过编辑angular-cli.json中的“assets”值，并指定希望通过路由访问的任何文件和文件夹来完成此操作。并在生成期间由angular cli复制到dist文件夹

例如，以下内容将复制并允许路由到以下内容：

src/assets/*整个文件夹 src/somefolder/*整个文件夹 src/favicon.ico src/web.config 资产：[ 资产 一些文件夹， favicon.ico， web.config ],

---

有关更深入的示例，请在此处查看Angular CLI wiki:

问题在于，在填充this.id之前调用getData。 换个地方就行了

ngOnInit():void {
  this.id = this.route.params['id'];
  this.getData();
  this.patientService.getPatient(this.id)
    .subscribe(patient => this.patient = patient);

  }

编辑： route.params是可观察的，因此您需要像这样使用它：

this.sub = this.route.params.subscribe(params => {
   this.id = +params['id']; // (+) converts string 'id' to a number

   // In a real app: dispatch action to load the details here.
});

---

谢谢你的帮助，但这不是问题所在，因为我可以识别同一文件夹中的另一个json文件。我尝试过，但我得到了相同的错误。我确实认为我们在正确的轨道上，只是不知道如何修复。请告诉我，为什么需要运行这个。patientService.getpatientsthis.id两次？首先是在getData中，然后是明确的，这是我的错误。我删除了显式的一个。。。。还是同样的错误。谢谢你帮助我：是的！成功了！谢谢Denis Reshetniak：没问题：编码快乐！

this.sub = this.route.params.subscribe(params => {
   this.id = +params['id']; // (+) converts string 'id' to a number

   // In a real app: dispatch action to load the details here.
});