重置Angular 2应用 [英] Resetting Angular 2 App
问题描述
我的Angular 2应用程序具有注销功能.我们希望尽量避免重新加载页面(即document.location.href = '/';
),但是注销过程需要重置应用程序,以便当另一个用户登录时,上一会话没有剩余数据.
My Angular 2 app has a logout feature. We want to avoid doing a page reload if we can (i.e. document.location.href = '/';
), but the logout process needs to reset the app so when another user logs in there's no residual data from the previous session.
这是我们的main.ts文件:
Here's our main.ts file:
import 'es6-shim/es6-shim';
import './polyfills';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { ComponentRef, enableProdMode } from '@angular/core';
import { environment } from '@environment';
import { AppModule } from './app/app.module';
if (environment.production === true) {
enableProdMode();
}
const init = () => {
platformBrowserDynamic().bootstrapModule(AppModule)
.then(() => (<any>window).appBootstrap && (<any>window).appBootstrap())
.catch(err => console.error(err));
};
init();
platformBrowserDynamic().onDestroy(() => {
init();
});
您可以看到在应用程序被销毁时,我正在尝试调用init()方法.我们的user-authentication.service中的注销方法会启动destroy:
You can see that I'm trying to call the init() method when the application is destroyed. The logout method in our user-authentication.service initiates destroy:
logout() {
this.destroyAuthToken();
this.setLoggedIn(false);
this.navigateToLogin()
.then(() => {
platformBrowserDynamic().destroy();
});
}
这会出现以下错误:
选择器"app-root"与任何元素都不匹配
The selector "app-root" did not match any elements
任何帮助表示赞赏.
推荐答案
我最终弄清楚了这一点.这可以比我的实现更简单地完成,但是我想将引导程序保留在main.ts
中,而不是将其保留在请求重新启动的服务中.
I ended up figuring this out in the end. This could be done more simply than my implementation, but I wanted to keep the bootstrapping in main.ts
rather than stick it in the service that requests the restart.
- 创建一个单例,为Angular和非Angular(
main.ts
)进行通信提供一种方式:
- Create a singleton that provides a way for Angular and non-Angular (
main.ts
) to communicate:
boot-control.ts
:
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
export class BootController {
private static instance: BootController;
private _reboot: Subject<boolean> = new Subject();
private reboot$ = this._reboot.asObservable();
static getbootControl() {
if (!BootController.instance) {
BootController.instance = new BootController();
}
return BootController.instance;
}
public watchReboot() {
return this.reboot$;
}
public restart() {
this._reboot.next(true);
}
}
- 调整
main.ts
以订阅重新启动请求:
- Adjust
main.ts
to subscribe to the reboot request:
main.ts
:
import { enableProdMode, NgModuleRef, NgModule } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { BootController } from './boot-control';
if (environment.production) {
enableProdMode();
}
const init = () => {
platformBrowserDynamic().bootstrapModule(AppModule)
.then(() => (<any>window).appBootstrap && (<any>window).appBootstrap())
.catch(err => console.error('NG Bootstrap Error =>', err));
}
// Init on first load
init();
// Init on reboot request
const boot = BootController.getbootControl().watchReboot().subscribe(() => init());
- 将NgZone添加到触发注销的服务中:
user-auth.service.ts
:
import { BootController } from '@app/../boot-control';
import { Injectable, NgZone } from '@angular/core';
@Injectable()
export class UserAuthenticationService {
constructor (
private ngZone: NgZone,
private router: Router
) {...}
logout() {
// Removes auth token kept in local storage (not strictly relevant to this demo)
this.removeAuthToken();
// Triggers the reboot in main.ts
this.ngZone.runOutsideAngular(() => BootController.getbootControl().restart());
// Navigate back to login
this.router.navigate(['login']);
}
}
NgZone的要求是避免发生错误:
The NgZone requirement is to avoid the error:
预计不在Angular Zone中,但确实如此!
Expected to not be in Angular Zone, but it is!
这篇关于重置Angular 2应用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!