javascript - Ionic 4 Angular:未捕获的 ReferenceError:dismissModal 未在 HTMLElement.onclick 中定义(但已定义函数!)
问题描述
错误: 未捕获的 ReferenceError:dismissModal 未在 HTMLElement.onclick 中定义
Match-Summary-Modal.component.html
<ion-header translucent>
<ion-toolbar>
<ion-title>Match Summary</ion-title>
<ion-buttons slot="end">
<ion-button onclick="dismissModal()">Return to Queue Page</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-content>This match you had a score of {{score}}</ion-card-content>
<ion-card-content>And a place of {{place}} out of {{playerCount}} players</ion-card-content>
</ion-card>
</ion-content>
匹配摘要模态.component.ts
import { Component, OnInit, Input} from '@angular/core';
import { ModalController } from '@ionic/angular';
@Component({
selector: 'app-match-summary-modal',
templateUrl: './match-summary-modal.component.html',
styleUrls: ['./match-summary-modal.component.scss'],
})
export class MatchSummaryModalComponent implements OnInit {
@Input() score: number;
@Input() place: number;
@Input() playerCount: number;
constructor(private modalController: ModalController) {
}
ngOnInit() {}
async dismissModal() {
this.modalController.dismiss()
}
}
GameNetworkService.ts (在服务中的某处,注入了 modalController)
this.lobbyServerSocket.on('match-summary', async (summarydata) => {
let modal = await this.modalController.create({
component: MatchSummaryModalComponent,
componentProps: {
score: summarydata.score,
place: summarydata.place,
playerCount: summarydata.playerCount
}
})
await modal.present()
this.lobbyServerSocket.disconnect(true)
this.lobbyServerSocket = null;
})
问题
当在 MatchSummaryModal 中明确定义时,为什么 angular/ionic在单击按钮时dismissModal()
无法找到组件内非常清楚地调用和包含的方法?dismissModal()
此外,我需要做什么才能获得预期的功能?(这是使模态在按钮单击时自行消失)
谢谢!
解决方案
它应该是
<ion-button (click)="dismissModal()">Return to Queue Page</ion-button>
代替
<ion-button onclick="dismissModal()">Return to Queue Page</ion-button>
推荐阅读
- python - 如何在 python 中编写一个安全的应用程序?
- tensorflow - 将 Tensor 对象从 Tensorflow (1.15.0) 转换为没有 eval() 的标量
- docker - Nginx 从 docker-compose 运行返回“在上游找不到主机”
- flutter - 根据用户输入在 ListVIew 的容器内的 TextFormField() 中更新 Text()
- javascript - 如何消除引导输入元素内部的间隙?
- javascript - 如何使用 vue 将 html、js、css 文件转换为 SFC?
- ruby-on-rails - 收到感谢、活跃记录、rails 的用户
- c++ - 为什么将 value_type 参数化为默认值的 std::list 分配器?
- jquery - jQuery:隐藏*仅*文本
- python - 如何在 Instagram 上向下滚动到末尾