0

当我们点击一​​个按钮时，我们试图让一个 Ionic 模态显示。我们正在关注 Ionic Framework (v5) 模式的文档。（https://ionicframework.com/docs/api/modal）

主页.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”作为前缀，但错误保持不变。谢谢！

4

1 回答 1

0

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

于 2020-08-07T12:55:09.583 回答