Блог

Я только начал кодировать неделю назад, и я пытаюсь сделать так, чтобы в моем приложении Ionic (я использую Ionic CLI версии 5.4.16) появились 2 кнопки, первая из которых является кнопкой списка действий, а вторая — кнопкой оповещения. Я копирую код из официальной документации ionic, но я сталкиваюсь с проблемой при попытке экспортировать, а затем ссылаться на функцию в моем AlertClass (расположенном в моем файле home.page.ts) в моем home.page.html . Я получаю следующую ошибку:

 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 {}
  

Хорошо, итак, вы хотите выдавать предупреждение при нажатии на «Alert» ion-button . Для этого вы используете привязку событий Angular, как и следовало бы. Как указано в документах Angular, приведенном в разделе template statment, presentAlert() в данном случае должно быть найдено в этом компоненте.

Однако, насколько я вижу, ваша функция presentAlert() вместо этого определена в экспортируемом классе AlertClass . Итак, что вы хотите сделать, это переместить presentAlert() в HomePage класс вместе с presentActionSheet() .

Если вы хотите модулировать функцию оповещения, я предлагаю заглянуть в сервисы, потому что это похоже на то, что вы намеревались сделать с AlertClass .

tldr: переместите presentAlert() в HomePage класс вместе с presentActionSheet() .