Ionic/Angular 按钮单击：ctx.xxx 不是函数答案

【问题标题】：Ionic/Angular button click: ctx.xxx is not a functionIonic/Angular 按钮单击：ctx.xxx 不是函数
【发布时间】：2020-08-07 20:55:09
【问题描述】：

我们试图让 Ionic 模式在我们单击按钮时显示。我们正在关注 Ionic Framework (v5) 模式的文档。 (https://ionicframework.com/docs/api/modal)

home.page.html

<app-header title="Home"></app-header>

<ion-content [fullscreen]="true">
  <div class="ion-text-center center-vertical">
    <ion-icon class="icon-xl" name="bluetooth"></ion-icon>
    <h3>Not connected</h3>
  </div>

  <ion-fab vertical="center" horizontal="center" slot="fixed" class="ion-text-center">
    <ion-fab-button (click)="showDevices()">
      <ion-icon name="bluetooth"></ion-icon>
    </ion-fab-button>
    <small>Connect</small>
  </ion-fab>
</ion-content>

home.module.ts

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

import { HomePageRoutingModule } from './home-routing.module';
import { HeaderComponent } from '../header/header.component';
import { DevicesComponent } from '../devices/devices.component';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    HomePageRoutingModule
  ],
  entryComponents: [HeaderComponent],
  declarations: [HomePage, HeaderComponent]
})
export class HomePageModule {
  constructor(public modalController: ModalController) { }

  public async showDevices() {
    const modal = await this.modalController.create({
      component: DevicesComponent
    });
    return await modal.present();
  }
}

当我们点击按钮时，我们得到以下错误：

core.js:6241 ERROR TypeError: ctx.showDevices is not a function
    at HomePage_Template_ion_fab_button_click_7_listener (template.html:10)
    at executeListenerWithErrorHandling (core.js:21819)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:21861)
    at HTMLElement.<anonymous> (platform-browser.js:976)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41645)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)
    at invokeTask (zone-evergreen.js:1621)

有人知道吗？ showDevices() 的类型是 Promise 但 Angular 应该能够处理它吗？我们也尝试添加“this”作为前缀，但错误保持不变。谢谢！

【问题讨论】：

所以你有 HomePageModule 但你将它用作组件？您需要将 ModalController 导入 home.page.ts 而不是 home.page.module.ts
你是对的。我们将代码放入我们的模块而不是我们的组件中。谢谢。
太好了，感谢您分享代码！

标签： angular typescript ionic-framework

【解决方案1】：

叹息.. 我们将代码放入我们的模块而不是我们的组件中。问题已解决，谢谢 Sergey！

【讨论】：