Angular2自动重定向到其他路径

Question

Update I have an error that makes it load wrong something with an external file that doesn't load.

So I have this problem when I go from localhost:3000/afdelingen/1 to localhost:3000/patienten/1 . The url instantly jumps back to localhost:3000/afdelingen/1 but the correct component is still loaded . I can also tell you that the ngOnInit is called twice but the onClick is only called once so this happens because the url changes. and that it works correctly when I go from localhost:3000/dashboard to localhost:3000/afdelingen/1.

Here is my app.module.ts (Sorry for dutch in the code)

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

Component that makes the call:

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

Component that it correctly loads:

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

}

If you need anything else just tell me.

Answer 1

This typically means there is an error in the component you are calling. Best thing to troubleshoot is comment out all your code in the patienten nginit so its just an empty component. Then try and load it. If it does load there is a problem with your nginit.

Might want to also comment out that route params.