कोणीय 2 संकल्प केवल एक बार काम करता है

Question

मैं एक साधारण समाधान करने की कोशिश कर रहा हूं जो उपयोगकर्ता को लौटाता है। हालांकि, मेरे आवेदन में मुझे http घटक को अपनी कक्षा के साथ लपेटने की ज़रूरत है, जो एक विषय को देखने योग्य के रूप में लौटाता है। मेरा रिजॉल्वर पहले उपयोगकर्ता लिंक पर अपेक्षित काम करता है, लेकिन समाधान के बाद UserProfileComponent में किसी भी उपयोगकर्ता लिंक पर क्लिक करते समय, समाधान कभी दूसरी बार पूरा नहीं होता है। मैं उपयोगकर्ता आईडी को नए आईडी के साथ बदल रहा हूं, और userResolve प्रिंट में console.log देख सकता हूं, लेकिन कुछ भी नहीं होता है।

मेरे रूटर:

import { Routes, RouterModule } from '@angular/router'; 
import { DashboardComponent } from './dashboard/dashboard.component'; 
import { UserProfileComponent } from './user-profile/user-profile.component'; 
import { LoginComponent } from './login/login.component'; 
import { AuthGuard } from './_resolve/guard.auth'; 
import { UserResolve } from './_resolve/user.resolve'; 

const appRoutes: Routes = [ 
    { path: '', component: DashboardComponent, canActivate: [AuthGuard] }, 
    { path: 'user/:id', component: UserProfileComponent, canActivate: [AuthGuard], resolve: { user: UserResolve } }, 
    { path: 'login', component: LoginComponent }, 

    // otherwise redirect to home 
    { path: '**', redirectTo: '' } 
]; 

export const Routing = RouterModule.forRoot(appRoutes); 

UserResolve:

import { Injectable } from '@angular/core'; 
import { Resolve, ActivatedRouteSnapshot } from '@angular/router'; 
import { ApiService } from '../_services/api.service'; 
import { Observable } from 'rxjs'; 

import { User } from '../_models/user'; 

@Injectable() 
export class UserResolve implements Resolve<User> { 

    constructor(private apiService:ApiService) {} 

    resolve(route: ActivatedRouteSnapshot):Observable<User> { 
    console.log('getting user ' + route.params['id'] + ' with resolver'); 
    return this.apiService.getUser(route.params['id']).first(); 
    } 
} 

ApiService:

import { Injectable } from '@angular/core'; 
import { Http, Headers, Response, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/Rx'; 

import { RefreshHttpClient } from '../_injectables/refresh-http-client'; 
import { User } from '../_models/user'; 

@Injectable() 
export class ApiService { 

    constructor(private rfhttp:RefreshHttpClient) { } 

    getUser(userId):Observable<User> { 
    return this.rfhttp.get('/api/user?userId=' + userId); 
    } 

} 

और RefreshHttpClient "मिल" विधि:

... 
get(url):Observable<any> { 
    var sub = new Subject<any>(); 
    var obs = this.http.get(url, { 
    headers: this.createAuthorizationHeaders() 
    }) 
    .map(res => res.json()) 
    .subscribe(
    data => { 
     return sub.next(data); 
    }, 
    error => { 
     if (error.status == 401 || error.status == 403) { 
     this.refreshAndRetry(() => { 
      this.http.get(url, { 
      headers: this.createAuthorizationHeaders() 
      }) 
      .map(res => res.json()) 
      .subscribe(
      data => { 
       return sub.next(data); 
      }, 
      error => { 
       console.error(error); 
       return null; 
      }); 
     }); 
     } else { 
     console.error(error); 
     return null; 
     } 
    } 
); 

    return sub.asObservable(); 
} 
... 

संपादित करें: जोड़ना UserProfileComponent:

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 

import { User } from '../_models/user'; 

@Component({ 
    selector: 'app-user-profile', 
    templateUrl: './user-profile.component.html', 
    styleUrls: ['./user-profile.component.scss'] 
}) 
export class UserProfileComponent implements OnInit { 

    abstract:Boolean; 
    user:User; 

    constructor(
    private route:ActivatedRoute 
) { } 

    ngOnInit() { 
    this.user = this.route.snapshot.data['user']['data']; 
    console.log(this.user); 

... 

ध्यान दें कि मेरी API सर्वर एक "डेटा" विशेषता के साथ एक JSON संरचना देता है, इसलिए ['data']।

ngOnInit इस घटक में नहीं पहले को छोड़कर किसी भी मार्ग नेविगेशन, जो मुझे विश्वास है कि रिज़ॉल्वर प्रत्यक्ष कभी नहीं पूरा किया है पर पहुंच गया है।

Answer 1

शायद समस्या यह है कि आप हल किए गए डेटा तक कैसे पहुंचते हैं।

जब यूआरएल बदलता है, तो आपका घटक पुन: प्रारंभ नहीं होता है और यही कारण है कि यदि आप URL पैरामीटर के आधार पर घटक के भीतर डेटा लोड करना चाहते हैं तो आपको रूट पैरामीटर परिवर्तनों की सदस्यता लेनी चाहिए।

तो जब आप संकलित डेटा तक पहुंचते हैं, तो आपको शायद यह भी मानना ​​चाहिए कि यह घटक के पुन: प्रारंभ किए बिना बदल सकता है।

संपादित करें: UserProfileComponent कोड से यह दिखाई देता है कि मेरी धारणा सबसे अधिक सही है। सब्सक्रिप्शन के साथ हल किए गए डेटा को पढ़ने का प्रयास करें:

this.route.data.subscribe(d => this.user = d['user']['data']);