我正在使用 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 {}
注销.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
呢?我错过了什么吗?
最佳答案
Logout
不是提供程序(它是一个组件),但您正试图将其注入(inject) MyApp
。从它的外观来看,您的意图似乎并不是真正要使 Logout
成为一个组件。在这种情况下,您应该将 @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
中访问它的方法,您应该相反,要做的是创建一个可以同时注入(inject) Logout
和 MyApp
的服务,该服务可以使用服务功能来显示警报。
关于angular - ionic2 - 在侧边菜单中添加注销,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40329943/