angular – ionic2 – 在sidemenu中添加log
发布时间:2020-12-17 17:35:51 所属栏目:安全 来源:网络整理
导读:我正在使用sidemenu模板来开始我的应用程序.我想在sidemenu中添加一个按钮,以便用户启动注销警报模式以确认注销.这是我的代码: app.component.ts: import { Component,ViewChild } from '@angular/core';import { Nav,Platform } from 'ionic-angular';imp
我正在使用sidemenu模板来开始我的应用程序.我想在sidemenu中添加一个按钮,以便用户启动注销警报模式以确认注销.这是我的代码:
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,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(); } } 根据我的知识,这应该足够了.但是我收到了一个错误:
但为什么我们需要提供者呢?有什么我错过了吗? 解决方法
注销不是提供者(它是一个组件),但您正在尝试将其注入MyApp.从它的外观来看,看起来你的意图并不是真正使Logout成为一个组件.在这种情况下,您应该用@Injectable()替换@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应该是一个组件,并且您希望能够在MyApp中从它访问一个方法,那么您应该做的是创建一个可以注入Logout和MyApp的服务,这可以使用服务功能提出警报. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容