Question

我有离子2 /角度2的情况我真的不知道如何处理它，要么需要某种更好的方法的建议，或指导我的代码。

我有一个app.component文件，定义如下（这只是一个样本，只是为了了解我要去的地方）

 import {  Page1,LoginPage }  from '../pages/pages';
 import { Component } from '@angular/core';

 import {Idle, DEFAULT_INTERRUPTSOURCES} from '@ng-idle/core';
 import {Keepalive} from '@ng-idle/keepalive';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

public pages = [
{
  title: 'Page 1', // I want when the user is on this page or other pages except Login, to sign the user out on Idle state
  icon: 'apps',
  count: 0,
  component: Page1
}]
rootPage: any = LoginPage;

 idleState = 'Not started.';
 timedOut = false;
 lastPing?: Date = null;

 constructor(public platform: Platform,
          public statusBar: StatusBar, 
          public splashScreen: SplashScreen,
          public _menuController: MenuController,
          private idle: Idle, 
          private keepalive: Keepalive){
   this.initializeApp();



idle.setIdle(5);

idle.setTimeout(5);

idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

idle.onIdleEnd.subscribe(() => this.idleState = 'No longer idle.');
idle.onTimeout.subscribe(() => {
  this.idleState = 'Timed out!';
  this.timedOut = true;
});
idle.onIdleStart.subscribe(() => this.idleState = 'You\'ve gone idle!');
idle.onTimeoutWarning.subscribe((countdown) => this.idleState = 'You will 
 time out in ' + countdown + ' seconds!');

keepalive.interval(15);

keepalive.onPing.subscribe(() => this.lastPing = new Date());

this.reset();
 }


  reset() {
this.idle.watch();
this.idleState = 'Started.';
this.timedOut = false;
  }

}

根据上面的代码，当我的屏幕空闲时，我设置this.idleState来指示空闲状态。但现在我有一个登录页面，可能是10页（在这个例子中我有1个），我需要一个用户空闲的情况我将用户弹回root（登录）。我的问题是我需要在ALL PAGES上面的构造函数中重复代码块并从那里记录我的用户，或者我可以创建一个帮助类并将其注入所有页面。我需要建议或解决方法

Answer 1

好吧，它不被称为＆＃34;助手类＆＃34;本身＆＃39;，它更像是一个＆＃34;服务＆＃34;您可以根据需要创建导入页面。因为您的代码没有任何特定的视图关联，而是作用于视图/组件，所以它是每个视图/组件关联的服务。然而，如果它具有基于视图交互的视图元素和逻辑，那么您将创建一个组件。

我无法确切地告诉代码发生了什么，但所有服务基本相同，因为您从一个事实来源导入了可重复使用的代码片段。

因此，如果您创建了服务providers/handle-idle-service.ts，则需要在app.module.ts下的providers

中声明该服务

import { HandleIdle } from '../providers/handle-idle-service`;

....

providers: [
 { provide: ErrorHandler, useClass: IonicErrorHandler },
 StatusBar,
 SplashScreen,
 HandleIdle
]

这声明您的服务在整个项目中都可用，然后可以在每个页面组件中导入，以供使用。

import { HandleIdle } from '../providers/handle-idle-service`;

查看有关angular.io *的文档，了解特定的服务集成。因为Ionic是建立在角度上（我相信你知道），完全相同的原则适用。

* Serivies REF

全局使用@ ng-idle / core而不使用登录页面

1 个答案: