Cách tải lại ứng dụng Angular 2 sau khi người dùng đăng xuất

Question

Tôi muốn tải lại ứng dụng Angular 2 sau khi người dùng nhấp vào nút đăng xuất, đó là tôi muốn xóa tất cả dữ liệu hiện tại trong ứng dụng và tải biểu mẫu đăng nhập từ máy chủ.

Bây giờ, sau khi nhấp vào nút đăng xuất, tôi nhận được câu trả lời từ máy chủ (có biểu mẫu đăng nhập) trong phương thức đăng ký của mình, nhưng tôi không biết cách xóa dữ liệu của ứng dụng hiện tại và tải biểu mẫu đăng nhập .

Ai đó có thể giúp tôi không?

Đây là lớp học chính của tôi 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); 
    }); 
    } 
} 

Đây là dịch vụ của tôi. Tôi gửi yêu cầu đăng xuất từ ​​đây.

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

Và đây là thành phần của tôi mà từ đó tôi gọi phương thức đăng xuất.

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

} 

Khi tôi tải trang chính của ứng dụng lần đầu tiên (tôi gửi yêu cầu đến localhost: 3000), kiểm tra máy chủ nếu tôi xác nhận và nếu không, nó chuyển hướng tôi đến localhost: 3000 trang/lần đăng nhập. Sau khi xác thực máy chủ gửi cho tôi trang chính: localhost: 3000

Khi tôi gửi yêu cầu đăng xuất, máy chủ đăng xuất tôi và gửi trả lời với localhost: 3000/trang đăng nhập, vì tôi chưa đăng nhập.

Tôi nhận trang này từ máy chủ trong đăng xuất (...). Phương thức đăng ký (...), nhưng tôi không biết cách tải trang hiện tại (ứng dụng) và tải trình duyệt để tải trang này.

Answer 1

cập nhật

.dispose() là destroy()từ beta.16

gốc

Tôi đã không cố gắng này bản thân mình nhưng các giải pháp nêu tại https://github.com/angular/angular/issues/7009 âm thanh đầy hứa hẹn

@ rizwanhussain-vteams để đặt lại ứng dụng bạn có thể lưu thể hiện ComponentRef được giải quyết bằng lời hứa rằng bootstrap trả về.

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

Vì vậy, bạn có thể gọi vứt bỏ phương pháp ComponentRef dụ (appRef) để tiêu diệt thành phần và sau đó bạn có thể bootstrap nó một lần nữa.

thảo luận này cũng có thể là thú https://github.com/angular/angular/issues/7429

Phương pháp thể hiện trong How to reload a page using JavaScript? cũng nên làm việc nhưng không phải là an toàn WebWorker.

Answer 2

Cảm ơn mọi người đã cố gắng giúp tôi. Bạn thật tốt bụng.

@ GünterZöchbauer, cảm ơn bạn rất nhiều.Liên kết thứ ba của bạn:

Cách tiếp cận được hiển thị trong Làm cách nào để tải lại trang bằng Javascript? cũng nên hoạt động nhưng không an toàn cho WebWorker.

đã cho tôi câu trả lời đúng. Tôi đã thay đổi phương pháp của tôi logout() để:

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

thay vì:

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

và bây giờ ứng dụng của tôi làm việc một cách chính xác.

Cảm ơn bạn rất nhiều.