时间戳

首页 > 解决方案 > 使用 Ionic/Angular CLI 5.4.16 版在用户定义的类中导出和引用函数的正确方法是什么？

angular - 使用 Ionic/Angular CLI 5.4.16 版在用户定义的类中导出和引用函数的正确方法是什么？

问题描述

我一周前刚开始编码，我试图在我的 Ionic 应用程序中显示 2 个按钮（我使用的是 Ionic CLI 版本 5.4.16），第一个是操作表按钮，第二个是警报按钮。我正在从官方 ionic 文档中复制代码，但是当我尝试导出并在 home.page.html 中的 AlertClass（位于我的 home.page.ts 文件中）中引用一个函数时遇到了问题。我收到以下错误：

Identifier 'presentAlert' is not defined. The component declaration, template variable declarations, and element references do not contain such a member

任何帮助，将不胜感激 ：）

这是我的 home.page.html 按钮代码：

<ion-button (click)="presentActionSheet()" >Action Sheet</ion-button>

<ion-button (click)="presentAlert()">Alert</ion-button>

这是我的 home.page.ts 代码：

import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';
import { AlertController } from '@ionic/angular';



@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  constructor(public actionSheetController: ActionSheetController) {}

  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Albums',
      cssClass: 'my-custom-class',
      buttons: [{
        text: 'Delete',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Delete clicked');

        }
      }, {
        text: 'Share',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        }
      }, {
        text: 'Play (open modal)',
        icon: 'caret-forward-circle',
        handler: () => {
          console.log('Play clicked');
        }
      }, {
        text: 'Favorite',
        icon: 'heart',
        handler: () => {
          console.log('Favorite clicked');
        }
      }, {
        text: 'Cancel',
        icon: 'close',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheet.present();
  }
}

@Component({
  selector: 'alert-example',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class AlertClass {
  constructor(public alertController: AlertController) {}

  async presentAlert() {
    const alert = await this.alertController.create({
      cssClass: 'my-custom-class',
      header: 'Alert',
      subHeader: 'Subtitle',
      message: 'This is an alert message.',
      buttons: ['OK']
    });

    await alert.present();
}
}

这是我的 home.module.ts 代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { AlertClass } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule, 
    
  ],
  declarations: [
    HomePage,
    AlertClass
  ],
})
export class HomePageModule {}

标签： angularionic-framework

解决方案

好的，所以您想在单击“警报”ion-button时显示警报。您应该为此使用 Angular 的事件绑定。正如Angular 文档中引用的模板语句中所述，presentAlert()在这种情况下，应该在该组件上找到。

但是，据我所知，您的函数presentAlert()是在导出的类中定义的AlertClass。因此，您要做的是将 . 移到presentAlert()班级HomePage旁边presentActionSheet()。

如果您想模块化警报功能，我建议您查看服务，因为它看起来像您打算使用AlertClass.

tldr：将 移至presentAlert()班级HomePage，并排在presentActionSheet().

推荐阅读