उपयोगकर्ता लॉगआउट के बाद एंगुलर 2 ऐप को फिर से लोड करने के लिए कैसे करें

Question

उपयोगकर्ता लॉगऑन बटन पर क्लिक करने के बाद अपने कोणीय 2 ऐप को फिर से लोड करना चाहता हूं, मैं ऐप में सभी मौजूदा डेटा को साफ़ करना चाहता हूं और साइन इन फॉर्म से लोड करना चाहता हूं सर्वर।

अब, लॉगआउट बटन पर क्लिक करने के बाद, मुझे अपनी सदस्यता विधि में सर्वर से (साइन इन फॉर्म के साथ) का जवाब मिल रहा है, लेकिन मुझे नहीं पता कि वर्तमान ऐप के डेटा को कैसे साफ किया जाए और साइन इन फॉर्म लोड करें ।

क्या कोई मेरी मदद कर सकता है?

यह मेरा मुख्य वर्ग AppComponent

import {Component}   from 'angular2/core'; 
import {OnInit}    from "angular2/core"; 
import {Router}    from "angular2/router"; 
import {RouteConfig}  from "angular2/router"; 
import {AuthRouteOutlet} from "./common/directives/auth-router-outlet.directive"; 
import {AuthService}  from "./common/services/auth.service"; 
import {DashboardComponent} from "./common/components/dashboard.component"; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <auth-router-outlet></auth-router-outlet> 
    `, 
    directives: [AuthRouteOutlet, DashboardComponent] 
}) 
@RouteConfig([ 
    {path: '/dashboard/...', name: 'Dashboard', component: DashboardComponent, useAsDefault: true} 

]) 
export class AppComponent implements OnInit { 
    constructor(
     private _router: Router, 
     private _authService: AuthService 
) {} 

    ngOnInit():any { 
    var self = this; 

    this._authService.getLoggedOutEvent().subscribe(function(next) { 
     //console.log('AppComponent OnEmit: ' + JSON.stringify(next)); 
     self._router.navigateByUrl('/', true); 
    }); 
    } 
} 

यह मेरी सेवा है। मैं यहां से लॉगआउट अनुरोध भेजता हूं।

import {Injectable, EventEmitter} from 'angular2/core'; 
import {User} from "../models/user.interface"; 
import {Http} from "angular2/http"; 
import {Observable} from "rxjs/Observable"; 
import {Headers} from "angular2/http"; 

@Injectable() 
export class AuthService { 

    private _userLoggedOut = new EventEmitter<any>(); 

    constructor(private _http: Http) {} 

    getLoggedOutEvent(): EventEmitter<any> { 
     return this._userLoggedOut; 
    } 

    logout(): Observable<any>{ 
    return this._http.get('/logout'); 
    } 
} 

और यह मेरा घटक है जिससे मैं लॉगआउट विधि का आह्वान करता हूं।

import {Component} from "angular2/core"; 
import {ROUTER_DIRECTIVES, Router} from "angular2/router"; 
import {AuthService} from "../services/auth.service"; 

@Component({ 
    selector: 'mdm-header-bar', 
    template: ` 
    <header> 
     <nav id="mdm-header-bar" > 
     <ul> 
      <li><a (click)="addComponent()" title="Add component"><i class="fa fa-plus-circle"></i></a></li> 
      <li><a (click)="settings()" title="Settings"><i class="fa fa-cog"></i></a></li> 
      <li><a (click)="help()" title="Help"><i class="fa fa-question-circle"></i></a></li> 
      <li><a (click)="logout()" title="Logout"><i class="fa fa-sign-out"></i></a></li> 
     </ul> 
     </nav> 
    </header> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class HeaderComponent { 
    constructor(private _authService: AuthService) {} 

    logout() { 
    var self = this; 
    this._authService.logout() 
     .subscribe(function(next) { 
      self._authService.getLoggedOutEvent().emit(next); 
     }, function(exception){ 
      console.log('HeaderComponent OnException: ' + exception); 
     }, function() { 
      console.log('HeaderComponent OnCompleted '); 
     }); 
    } 

} 

जब मैं अनुप्रयोग के मुख्य पृष्ठ के लिए पहली बार (मैं स्थानीय होस्ट करने के लिए अनुरोध भेज: 3000) लोड, सर्वर की जाँच करता है अगर मैं प्रमाणीकृत और यदि नहीं, यह मेरे स्थानीय होस्ट पर रीडायरेक्ट: 3000/साइन-इन पृष्ठ। प्रमाणीकरण के बाद सर्वर मुझे मुख्य पृष्ठ भेजता है: लोकलहोस्ट: 3000

जब मैं लॉगआउट अनुरोध भेजता हूं, तो सर्वर मुझे लॉगआउट करता है और स्थानीयहोस्ट: 3000/साइनइन पेज के साथ एक जवाब भेजता है, क्योंकि मैं पहले से लॉग इन नहीं हूं।

मुझे यह पृष्ठ मेरे लॉगआउट (...) में सर्वर से मिलता है। सदस्यता लें (...) विधि, लेकिन मुझे नहीं पता कि वर्तमान पृष्ठ (ऐप) को कैसे उतारना है और इस पृष्ठ को लोड करने के लिए ब्राउज़र प्राप्त करें।

Answer 1

अद्यतन

.dispose()destroy()beta.16 के बाद से

मूल

मैं अपने आप को लेकिन समाधान https://github.com/angular/angular/issues/7009 में वर्णित इस प्रयास नहीं किया है आशाजनक लगता है

@ rizwanhussain-vteams ऐप को रीसेट करने के लिए आप ComponentRef इंस्टेंस को सहेज सकते हैं जिसे बूटस्ट्रैप रिटर्न के वादे से हल किया जाता है।

var appRef; 
bootstrap(App).then((_appRef) => { 
    appRef = _appRef; 
}); 

तो तुम ComponentRef उदाहरण (appRef) घटक को नष्ट करने की विधि निपटाने कॉल कर सकते हैं और फिर आप इसे फिर से बूटस्ट्रैप कर सकता है।

इस चर्चा भी दिलचस्प https://github.com/angular/angular/issues/7429

दृष्टिकोण How to reload a page using JavaScript? में दिखाया भी काम करना चाहिए हो सकता है लेकिन WebWorker सुरक्षित नहीं है।

Answer 2

मेरी मदद करने के लिए सभी को धन्यवाद। यह आप की बहुत दयालु भाबना है।

@ गुंटर ज़ोचबाउर, बहुत बहुत धन्यवाद।आपका तीसरा लिंक:

जावास्क्रिप्ट का उपयोग करके पृष्ठ को फिर से लोड करने के तरीके में दिखाया गया दृष्टिकोण? काम करना चाहिए लेकिन WebWorker सुरक्षित नहीं है।

मुझे सही जवाब दिया। बजाय

logout(){ 
    window.location.replace('/logout'); 
    } 

की: मैं अपने लॉगआउट() विधि बदल

logout(): Observable<any>{ 
    return this._http.get('/logout'); 
    } 

और अब मेरी एप्लिकेशन को सही ढंग से काम करता है।

बहुत बहुत धन्यवाद।