Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了重置Angular 2应用程序大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我的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();
  });
}

会出现以下错误

任何帮助赞赏.

解决方法

我最终搞清楚了.这可以比我的实现更简单地完成,但我想将引导保持在main.ts而不是将其粘贴在请求重启的服务中.

>创建一个单例,为Angular和非Angular(main.ts)提供通信方式:

启动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以订阅重启请求:

@H_154_5@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添加到触发注销的服务:

用户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的要求是避免错误

大佬总结

以上是大佬教程为你收集整理的重置Angular 2应用程序全部内容,希望文章能够帮你解决重置Angular 2应用程序所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。