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

}

据我所知，这应该足够了。但是我得到了一个错误：

45 异常：./MyApp 类 MyApp_Host 中的错误 - 内联模板：0:0 原因：没有提供注销服务！

但是为什么我们在这里需要provider？有什么我错过了吗？

Answer 1

Logout 不是提供者（它是一个组件），但您正试图将其注入MyApp。从外观上看，您的意图似乎并不是真的要使 Logout 成为一个组件。在这种情况下，您应该将replace 改为@Component() 和@Injectable()

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 是 应该是一个组件，并且您希望能够从它访问MyApp 中的方法，那么您应该做的是创建一个可以注入的服务在Logout 和MyApp 中都可以使用服务功能来呈现警报。

Answer 2

我知道会发生什么。我想多了。

有了alert controller，我们就不需要其他组件了。只需将alert controller 直接添加到app.component.ts 然后调用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();
}
}

你甚至不需要组件。