Angular 2路由参数未定义

Question

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

人们应该能够通过输入特定的id作为url来获取他们的患者文件，但到目前为止这是行不通的。我真的开始：

GET http://localhost:4200/assets/backend/patienten/undefined.json 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 {Routes} from "@angular/router"; 
import {AfdelingComponent} from "./afdeling/afdeling.component"; 
import {PatientComponent} from "./patient/patient.component"; 



export const routes: Routes = [ 
    {path: '', component: AfdelingComponent}, 
    {path: 'patient/:id', component: PatientComponent} 

]; 

和服务：

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) 
    } 
} 

Answer 1

的问题是，你拨打的getData填充this.id之前。 只是换个地方

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. 
}); 

Answer 2

您需要将这些文件作为静态资产提供给您的角度应用程序，否则角路由器会尝试将这些请求路由到您的应用内路由，而这些路由不会有匹配的路线。

您可以通过编辑angular-cli.json中的'assets'值，并指定您希望通过路由访问的任何文件和文件夹来完成此操作。 （并且还通过角CLI构建期间复制到DIST文件夹）。

作为一个例子，下面将复制并允许路由到以下内容：

• SRC /资产/ *（整个文件夹）
• SRC/somefolder/*（整个文件夹）
• SRC/favicon.ico的
• SRC/web.config中

"assets": [ "assets", "somefolder", "favicon.ico", "web.config" ],

对于更深入的例子，看看在角CLI维基这里：https://github.com/angular/angular-cli/wiki/stories-asset-configuration