Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angular – ionic2 – 在sidemenu中添加log大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用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的服务,这可以使用服务功能提出警报.

大佬总结

以上是大佬教程为你收集整理的angular – ionic2 – 在sidemenu中添加log全部内容,希望文章能够帮你解决angular – ionic2 – 在sidemenu中添加log所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。