ionic2 - hinzufügen abmelden im sidemenu

Question

Ich benutze sidemenu Vorlage, um meine App zu beginnen. Ich möchte eine Schaltfläche in sidemenu für Benutzer hinzufügen, um eine logout Alarmmodal zu starten, um die Abmeldung zu bestätigen. Hier sind meine Code:

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

} 

auf meine Kenntnisse und sollte dies ausreichend sein. Allerdings habe ich einen Fehler:

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

Aber warum brauchen wir provider hier? Gibt es etwas, was ich verpasst habe?

Answer 1

Logout ist kein Anbieter (es ist eine Komponente), aber Sie versuchen, es in MyApp zu injizieren. Vom Aussehen her sieht es nicht so aus, als ob deine Absicht darin besteht, die Logout Komponente zu machen. In diesem Fall sollten Sie replace stattdessen die @Component() mit @Injectable()

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

@Injectable() 
export class Logout { 
} 

Dann entfernen sie aus dem @NgModule.declarations und @NgModule.entryComponent, und fügen Sie ihn in die @NgModule.providers

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

Wenn Logoutist soll eine sein Komponente und Sie können in der Lage sein, auf eine Methode von ihm innerhalb MyApp zuzugreifen, was Sie stattdessen tun sollten, ist ein Service, der sowohl in dieinjiziert werden kannund MyApp, die die Dienstfunktionalität zum Anzeigen der Warnung verwenden können.

Answer 2

Ich finde heraus, was passiert. Ich denke über die Lösung nach.

Mit alert controller brauchen wir keine andere Komponente. fügen Sie einfach den alert controller gerade zu app.component.ts dann rufen Sie die presentalert() Funktion:

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

Sie haben nicht einmal eine Komponente benötigen.