グローバルに@ ng-idle/coreを使用してログインページを使用せずに

Question

私はイオン2/angular2の状況を抱えています。私はそれをどのように処理するのか本当に分かりません。私のコードのガイド。

私の画面がアイドル状態の私のとき私は、上記のコードによると以下のように定義されて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（ログイン）にポップします。私の質問は、私はすべてのページ上のコンストラクタでコードのブロックを繰り返し、そこから私のユーザーをログオンする必要がありますか、またはヘルパークラスを作成し、すべてのpages.Iに注入することができますアドバイスや回避策が必要です

Answer 1

それは "ヘルパークラス"それ自体ではなく、必要に応じてページにインポートするために作成できる "サービス"です。コードには特定のビューの関連付けがなく、ビュー/コンポーネントに対して機能するため、各ビュー/コンポーネントの関連付けのサービスです。ビューの相互作用に基づいたビュー要素とロジックがあった場合は、コンポーネントを作成します。

実際にコードで何が起こっているのかは分かりませんが、すべてのサービスは基本的に同じです。つまり、再利用可能なコードスニペットを1つの真実のソースからインポートした点です。あなたはあなたのサービスproviders/handle-idle-service.tsを作成する場合

だからあなたはその後、これは、各ページ・コンポーネントにインポートすることができ、プロジェクト全体であなたのサービスが利用可能で宣言しproviders

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

.... 

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

の下であなたのapp.module.tsでサービスを宣言する必要があり、必要でした、使用のために。

サービスの特定の統合については、angular.io *のドキュメントを参照してください。 Ionicは角度をつけているので（私はあなたが知っていると確信しています）、まったく同じ原理が適用されます。

* Serivies REF