Angular2가 자동으로 다른 경로로 리디렉션됩니다.

Question

업데이트로드되지 않는 외부 파일로 인해로드가 잘못되도록하는 오류가 있습니다.

localhost : 3000/afdelingen/1에서 localhost : 3000/patienten/1로 갈 때이 문제가 있습니다. 즉시 URL 은 로컬 호스트 : 3000/afdelingen/1로 점프하지만 올바른 구성 요소는 여전히로드됩니다.. ngOnInit은 두 번 호출되었지만 onClick은 한 번만으로 호출되므로 URL이 변경되기 때문에 발생합니다. 그리고 내가 localhost : 3000/대시 보드에서 localhost : 3000/afdelingen/1로 갈 때 제대로 작동한다는 것입니다.

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

구성 요소가 올바르게로드 :

을 여기

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

이것은 일반적으로 호출하는 구성 요소에 오류가 있음을 의미합니다. 문제를 해결하는 가장 좋은 방법은 환자 nginit의 모든 코드를 주석으로 처리하는 것입니다. 그런 다음로드 해보십시오. 로드가 발생하면 nginit에 문제가 있습니다.

해당 매개 변수를 주석으로 처리하고 싶을 수도 있습니다.