如何在用戶註銷後重新加載Angular 2應用程序

Question

我想在用戶單擊註銷按鈕後重新加載我的Angular 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 /登錄頁面。驗證後，服務器向我發送主頁面：localhost：3000

當我發送註銷請求時，服務器會註銷我並返回localhost：3000/signin頁面的答案，因爲我尚未登錄。 （...）。subscribe（...）方法，但我不知道如何卸載當前頁面（應用程序），並獲取瀏覽器加載此頁面。

Answer 1

更新

.dispose()是destroy()因爲beta.16

原

我還沒有嘗試過這個自己，但在https://github.com/angular/angular/issues/7009提到的解決方案聽起來前途

@ rizwanhussain-vteams重置應用程序，您可以保存ComponentRef實例，該實例通過承諾引導程序返回來解決。

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

所以，你可以調用dispose ComponentRef實例（appRef）破壞組件的方法，然後你可以再引導它。

這個討論也可能是有趣https://github.com/angular/angular/issues/7429

在How to reload a page using JavaScript?出也應努力的方法，但不是WebWorker安全。

Answer 2

感謝大家試圖幫助我。你真好。

@GünterZöchbauer，非常感謝。您的第三個鏈接：

如何使用Javascript重新載入頁面中顯示的方法？也應該可以工作，但不是WebWorker的安全。

給了我正確的答案。我改變了我的註銷（）方法：

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

代替：

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

，現在我的應用程序工作正常。

非常感謝。