Question

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

人们应该能够通过输入特定的id作为网址来获取他们的病人文件，但到目前为止还没有工作。我实际上得到了：

获取http://localhost:4200/assets/backend/patienten/undefined.json 404（未找到）

这是我的耐心成分：

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

问题是您在填充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是一个Observable，所以你需要使用它：

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中的值，并指定您希望通过路由访问的任何文件和文件夹。（并且在构建期间还会通过角度cli复制到dist文件夹。）

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

src / assets / *（整个文件夹）
src / somefolder / *（整个文件夹）
的src / favicon.ico的
的src / web.config中

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

有关更深入的示例，请在此处查看Angular CLI wiki：https://github.com/angular/angular-cli/wiki/stories-asset-configuration

角度2路由参数未定义

2 个答案: