ionic2 - dodaj wylogowanie w sidemenu

Question

Używam szablonu sidemenu, aby rozpocząć moją aplikację. Chcę dodać przycisk w polu sidemenu, aby użytkownik mógł uruchomić moduł alertu logout, aby potwierdzić wylogowanie. Oto mój kod:

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(); 
} 

} 

Na podstawie mojej wiedzy to powinno wystarczyć. Jednak mam błąd:

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

Ale dlaczego musimy provider tutaj? Czy jest coś, czego mi brakowało?

Answer 1

Logout nie jest dostawcą (jest to składnik), ale próbujesz wprowadzić go do MyApp. Wygląda na to, że nie jest tak, że Twoim zamiarem jest uczynienie komponentu Logout. W takim przypadku, należy zamiast replace@Component() z @Injectable()

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

@Injectable() 
export class Logout { 
} 

Następnie wyjąć ją z @NgModule.declarations i @NgModule.entryComponent i dodać go do @NgModule.providers

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

Jeśli Logoutjest ma być i chcesz mieć dostęp do metody z niego wewnątrz MyApp, zamiast tego należy utworzyć usługę, która może być wstrzykiwana zarówno do Logout i MyApp, które mogą skorzystać z funkcji usługi do przedstawienia alertu.

Answer 2

Rozumiem, co się stanie. Zastanawiam się nad rozwiązaniem.

Z alert controller nie potrzebujemy kolejnego komponentu. wystarczy dodać alert controller prosto do app.component.ts następnie wywołać funkcję presentalert():

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(); 
} 
} 

Nie trzeba nawet komponent.