HTML:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="cancelNewMsg()">
<ion-icon slot="icon-only" name="arrow-back"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>
New Messsage
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item-divider>
<ion-label> SEND NEW MESSAGE</ion-label>
</ion-item-divider>
<ion-grid>
<ion-row>
<ion-col>
<ion-item lines="full">
<ion-label position="floating">Message</ion-label>
<ion-textarea [(ngModel)]="message" auto-grow="true" maxlength="2000"></ion-textarea>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12">
<ion-button expand="block" color="default" (click)="cancelNewMsg()">Cancel</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12">
<ion-button expand="block" color="default" (click)="sendMsg()">Send</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
TS:
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
@Component({
selector: 'app-conv-new-msg-modal',
templateUrl: './conv-new-msg-modal.component.html',
styleUrls: ['./conv-new-msg-modal.component.scss']
})
export class ConvNewMsgModalComponent implements OnInit {
message = '';
submitAttempt = false;
constructor(private modal: ModalController) {}
ngOnInit() {
}
sendMsg() {
this.submitAttempt = true;
console.log(this.message);
}
cancelNewMsg() {
this.modal.dismiss();
}
}
打开模式的页面:
async newMessage() {
// Opens conv-new-msg-modal.component.html
const modal = await this.modal.create({
component: ConvNewMsgModalComponent,
});
modal.onDidDismiss().then(data => {
console.log(data);
},
err => {
});
return await modal.present();
}
不确定我在这里缺少什么,但是当我运行命令ionic cordova run android
时它会运行。我在该字段中输入一些文本,然后单击“发送”以查看console.log(this.message)
是否会打印出该值,但不会打印出来,它只是一个空变量。
当我单击发送按钮以显示数据时,控制台上没有出现错误。我也在物理设备上运行它。
modal.onDidDismiss().then((result: object) => {
if (result['data']) {
console.log(result['data']); // = this.message value
}
});