Question

更新我有一个错误，导致加载错误的外部文件无法加载。

当我从localhost：3000 / afdelingen / 1转到localhost：3000 / patienten / 1时，我遇到了这个问题。该网址立即跳回 localhost：3000 / afdelingen / 1但正确的组件仍然加载。我还可以告诉你， ngOnInit被调用两次，但 onClick只被调用一次，所以这是因为网址发生了变化。当我从localhost：3000 / dashboard转到localhost：3000 / afdelingen / 1时，它可以正常工作。

这是我的app.module.ts （对于代码中的荷兰人抱歉）

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

import { AppComponent }  from './app.component';
import {AfdelingComponent} from "./afdeling/afdeling.component";
import {FormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";
import {DashboardComponent} from "./dashboard/dashboard.component";
import {ToolbarComponent} from "./toolbar/toolbar.component";
import {AfdelingDetailComponent} from "./afdeling-detail/afdeling-detail.component";
import {Routes, RouterModule} from "@angular/router";
import {AfdelingService} from "./services/afdeling.service";
import {KamerComponent} from "./kamers/kamer.component";
import {KamerService} from "./services/kamers.service";
import {PatientViewComponent} from "./patienten/patient-view.component";
import {PatientService} from "./services/patienten.service";

const appRoutes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'afdelingen/:id', component: AfdelingDetailComponent },
  { path: 'patienten/:id', component: PatientViewComponent },
  { path: '', component: DashboardComponent },
  { path: '**', component: DashboardComponent }
];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)],
  declarations: [
    AppComponent,
    AfdelingComponent,
    DashboardComponent,
    ToolbarComponent,
    AfdelingDetailComponent,
    KamerComponent,
    PatientViewComponent],
  providers: [
    AfdelingService,
    KamerService,
    PatientService
  ],
  bootstrap: [
    AppComponent ]
})
export class AppModule { }

进行通话的组件：

import {Component, OnInit} from "@angular/core";
import {Kamer} from "../kamers/kamer";
import {KamerService} from "../services/kamers.service";
import {ActivatedRoute, Params, Router} from "@angular/router";


@Component({
  selector: 'afdeling-detail',
  templateUrl: './app/afdeling-detail/afdeling-detail.component.html',
  styleUrls: ['./app/afdeling-detail/afdeling-detail.component.css']

})

export class AfdelingDetailComponent implements OnInit{
  private afdelingId:number;
  private kamers:Kamer[] = [];

  private kamerNr = true;
  private patientView= false;
  private nextTreatmentTimeView= false;
  private lastTreatmentView= false;
  private sanitairView = false;
  private salonView= false;
  private childRoomView = false;

  private error:boolean;

  constructor(private kamerService:KamerService, private route: ActivatedRoute,private router:Router) {}

  ngOnInit() {

    this.route.params
    // (+) converts string 'id' to a number
      .switchMap((params: Params) => this.kamerService.getKamers(+params['id'])) //switchmap zal eventuele openstaande calls als gevolg van snelle id wijzigingen door de user automatisch cancellen
      .subscribe((kamers:Kamer[]) => this.kamers = kamers);

    this.route.params.subscribe((params: Params) => {
      this.afdelingId = params["id"];
    });
  }

  public goBack():void{
    this.router.navigate(['dashboard']);
  }

  public onClick(patient:number):void {
    console.log("onClick");
    this.router.navigate(['patienten', patient]);
  }
}

正确加载的组件：

import {Component, OnInit} from "@angular/core";
import {ActivatedRoute, Params, Router} from "@angular/router";
import {Patient} from "./patient";
import {PatientService} from "../services/patienten.service";
import {KamerService} from "../services/kamers.service";

@Component({
  selector: 'patient-view',
  templateUrl: './app/patienten/patient-view.component.html',
  styleUrls: ['./app/patienten/patient-view.component.css']
})

export class PatientViewComponent implements OnInit{
  private patientNr:number;
  private patient:Patient;

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

  ngOnInit(){
    this.route.params.subscribe((params: Params) => {
      this.patientNr = +params["id"];
      console.log("patient nr" + this.patientNr);
    });

    this.route.params
    // (+) converts string 'id' to a number
      .switchMap((params: Params) => this.patientService.getPatient(+params['id'])) //switchmap zal eventuele openstaande calls als gevolg van snelle id wijzigingen door de user automatisch cancellen
      .subscribe((patient: Patient) => this.patient = patient);
  }

}

如果您还需要其他任何信息，请告诉我。

Answer 1

这通常意味着您正在调用的组件中存在错误。排除故障的最佳方法是在patienten nginit中注释掉所有代码，因此它只是一个空组件。然后尝试加载它。如果它确实加载了你的nginit就会出现问题。

可能还要注释掉那条路线。

Angular2会自动重定向到不同的路径

1 个答案: