ionic2 - サイドメニューでログアウトする

Question

私はsidemenuテンプレートを使用してアプリケーションを開始しています。 sidemenuにボタンを追加して、ログアウトを確認するためにlogout警告モーダルを起動するようにします。ここに私のコードです：

app.component.ts：

import { Component, ViewChild } from '@angular/core'; 
import { Nav, Platform } from 'ionic-angular'; 
import { StatusBar, Splashscreen } from 'ionic-native'; 

import { Home } from '../pages/home/home'; 
import { Profile } from '../pages/profile/profile'; 
import { Logout } from '../pages/logout/logout'; 

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

    rootPage: any = Home; 

    pages: Array<{title: string, component: any}>; 

    constructor(public platform: Platform, public logout:Logout) { 
    this.initializeApp(); 

    // used for an example of ngFor and navigation 
    this.pages = [ 
     { title: 'Home', component: Home }, 
     { title: 'Profile', component: Profile } 
    ]; 

    } 

    initializeApp() { 
    this.platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     StatusBar.styleDefault(); 
     Splashscreen.hide(); 
    }); 
    } 

    openPage(page) { 
    // Reset the content nav to have just this page 
    // we wouldn't want the back button to show in this scenario 
    this.nav.setRoot(page.component); 
    } 

    logoutApp(){ ///<-- call from static button 
    this.logout.presentConfirm(); ///<-- call 
    } 

} 

app.html：

<ion-menu [content]="content"> 
    <ion-content> 
    <ion-list> 
     <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> 
     {{p.title}} 
     </button> 
     <button ion-item (click)="logoutApp()"> 
     <!--Add this static button for logout--> 
     Log Out 
     </button> 
    </ion-list> 

    </ion-content> 

</ion-menu> 
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 

app.module.ts：

import { NgModule } from '@angular/core'; 
import { IonicApp, IonicModule } from 'ionic-angular'; 
import { MyApp } from './app.component'; 

import { Home } from '../pages/home/home'; 
import { Profile } from '../pages/profile/profile'; 
import { Logout } from '../pages/logout/logout'; 

@NgModule({ 
    declarations: [ 
    MyApp, 
    Home, 
    Profile, 
    Logout 
    ], 
    imports: [ 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    Home, 
    Profile, 
    Logout 
    ], 
    providers: [] 
}) 
export class AppModule {} 

logout.ts：

import { Component } from '@angular/core'; 
import { AlertController } from 'ionic-angular'; 

@Component({ 
    template: `` 
}) 
export class Logout { 
    constructor(
    public alertCtrl: AlertController 
) { } 

presentConfirm() { 
    let alert = this.alertCtrl.create({ 
    title: 'Confirm Log Out', 
    message: 'Are you sure you want to log out?', 
    buttons: [ 
     { 
     text: 'Cancel', 
     role: 'cancel', 
     handler:() => { 
      console.log('Cancel clicked'); 
     } 
     }, 
     { 
     text: 'Log Out', 
     handler:() => { 
      console.log('Logged out'); 
     } 
     } 
    ] 
    }); 
    alert.present(); 
} 

} 

私の知識に基づいて、これは十分なはずです。ただし、エラーが発生しました：

45EXCEPTION: Error in ./MyApp class MyApp_Host - inline template:0:0 caused by: No provider for Logout!

ここでproviderはなぜ必要ですか？私が逃したものはありますか？

Answer 1

Logoutはプロバイダーではありませんが、それはMyAppに注入しようとしています。あなたの意図は実際にはLogoutをコンポーネントにするように見えません。その場合には、あなたがすべき代わりreplace@Component()

import { Injectable } from '@angular/core'; 

@Injectable() 
export class Logout { 
} 

その後

@NgModule.declarationsと@NgModule.entryComponentからそれを削除し、ことになっている@NgModule.providers

@NgModule({ 
    declarations: [ 
    // Logout 
    ], 
    entryComponents: [ 
    // Logout 
    ], 
    providers: [ 
    Logout 
    ] 
}) 
class AppModule {} 

Logout場合にそれを追加@Injectable()とコンポーネントの中からメソッドにアクセスできるようにするには、MyAppの代わりに行うべきことは、両方ともに挿入できるサービスを作成することですとMyAppは、サービス機能を使用してアラートを表示できます。

Answer 2

何が起こるかわかります。私は解決策を考える上で。

alert controllerでは、別のコンポーネントは必要ありません。ちょうどそのpresentalert()関数を呼び出すapp.component.tsにalert controllerストレートを追加します。

import { Component, ViewChild } from '@angular/core'; 
import { Nav, Platform, AlertController} from 'ionic-angular';///<-- add AlertController 
import { StatusBar, Splashscreen } from 'ionic-native'; 

import { Home } from '../pages/home/home'; 
import { Profile } from '../pages/profile/profile'; 

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

    rootPage: any = Home; 

    pages: Array<{title: string, component: any}>; 

    constructor(public platform: Platform, public alertCtrl: AlertController 
    // , public logout:Logout 
) { 
    this.initializeApp(); 

    // used for an example of ngFor and navigation 
    this.pages = [ 
     { title: 'Home', component: Home }, 
     { title: 'Participate', component: Participate }, 
     { title: 'Adopt', component: Adopt }, 
     { title: 'Result', component: Result }, 
     { title: 'Profile', component: Profile } 
    ]; 

    } 

    initializeApp() { 
    this.platform.ready().then(() => { 
     StatusBar.styleDefault(); 
     Splashscreen.hide(); 
    }); 
    } 

    openPage(page) { 
    this.nav.setRoot(page.component); 
    } 

    presentLogout() { ///<-- call this function straight with static button in html 
    let alert = this.alertCtrl.create({ 
    title: 'Confirm Log Out', 
    message: 'Are you sure you want to log out?', 
    buttons: [ 
     { 
     text: 'Cancel', 
     role: 'cancel', 
     handler:() => { 
      console.log('Cancel clicked'); 
     } 
     }, 
     { 
     text: 'Log Out', 
     handler:() => { 
      console.log('Logged out'); 
     } 
     } 
    ] 
    }); 
    alert.present(); 
} 
} 

あなたも、コンポーネントを必要としません。