重置 Angular 2 个应用
Resetting Angular 2 App
我的 Angular 2 应用程序具有注销功能。我们希望尽可能避免重新加载页面(即 document.location.href = '/';
),但注销过程需要重置应用程序,因此当另一个用户登录时,上一个会话没有残留数据。
这是我们的 main.ts 文件:
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中的logout方法发起destroy:
logout() {
this.destroyAuthToken();
this.setLoggedIn(false);
this.navigateToLogin()
.then(() => {
platformBrowserDynamic().destroy();
});
}
这会产生以下错误:
The selector "app-root" did not match any elements
感谢任何帮助。
我终于弄明白了。这可以比我的实现更简单,但我想将引导程序保留在 main.ts
中,而不是将其粘贴在请求重启的服务中。
- 创建一个为 Angular 和非 Angular (
main.ts
) 提供通信方式的单例:
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
订阅重启请求:
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 的要求是为了避免错误:
Expected to not be in Angular Zone, but it is!
我遇到了同样的问题。更简单的方法是使用 location.reload()
当用户单击注销按钮时调用的 App.component 中的函数应如下所示。
logout() {
//Auth Logout service call
this.auth.logout();
//Router Navigation to Login Page
this.router.navigate(['login']);
//Reload Angular to refresh components and prevent old data from loading up for a
//another user after login. This especially applies lazy loading cases.
location.reload();
}
我的 Angular 2 应用程序具有注销功能。我们希望尽可能避免重新加载页面(即 document.location.href = '/';
),但注销过程需要重置应用程序,因此当另一个用户登录时,上一个会话没有残留数据。
这是我们的 main.ts 文件:
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中的logout方法发起destroy:
logout() {
this.destroyAuthToken();
this.setLoggedIn(false);
this.navigateToLogin()
.then(() => {
platformBrowserDynamic().destroy();
});
}
这会产生以下错误:
The selector "app-root" did not match any elements
感谢任何帮助。
我终于弄明白了。这可以比我的实现更简单,但我想将引导程序保留在 main.ts
中,而不是将其粘贴在请求重启的服务中。
- 创建一个为 Angular 和非 Angular (
main.ts
) 提供通信方式的单例:
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
订阅重启请求:
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 的要求是为了避免错误:
Expected to not be in Angular Zone, but it is!
我遇到了同样的问题。更简单的方法是使用 location.reload()
当用户单击注销按钮时调用的 App.component 中的函数应如下所示。
logout() {
//Auth Logout service call
this.auth.logout();
//Router Navigation to Login Page
this.router.navigate(['login']);
//Reload Angular to refresh components and prevent old data from loading up for a
//another user after login. This especially applies lazy loading cases.
location.reload();
}