我有以下代码:
home.html
<button (click)="doAlert()" color="primary" ion-button small round>
<div><span float-right> {{ meetingTimes.meeting1 }} </span></div>
</button>
home.ts
doAlert() {
let meetingTime = this.alerCtrl.create({
title: 'Weekly Meeting Times',
message: 'Meeting 1 time:' {{ meetingTimes.meeting1 }},
buttons: ['Close']
});
meetingTime.present()
}
在 home.html
中,{{ meetingTimes.meeting1 }}
工作正常,但是如何在单击时在 doAlert 方法中显示/使用相同的值?
我知道我不能在组件中使用这个 {{ meetingTimes.meeting1 }}
但正确的方法是什么?
我已经尝试过:message: 'Meeting 1 time:' + meetingTimes.meeting1,
但没有成功。
最佳答案
您可以使用 ModalContoller
来完成。您可以从 home.html
打开另一个页面作为模态对话框。让我们将该页面设为 modal.html
。
modal.html
<div id="container">
<ion-content padding>
<p class="message">{{message}}</p>
<button ion-button color="danger" (click)="close()">OK</button>
</ion-content>
</div>
modal.scss
#container {
margin: 100px 50px;
height: 120px;
box-shadow: -3px -4px 12px 6px rgba(0, 0, 0, 0.4);
}
button {
float: right;
margin-bottom: 20px;
}
.message {
color: red;
font-weight: bold;
}
ModalPage.ts
export class ModalPage {
message: string;
constructor(
private viewCtrl: ViewController,
private navParams: NavParams) {
this.message = this.navParams.get('message');
}
close() {
this.viewCtrl.dismiss();
}
}
现在您可以从 home.html 中将 modal.html 作为对话框打开,如下所示。
export class HomePage {
constructor(private modalCtrl: ModalController) {}
doAlert()() {
let myModal = this.modalCtrl.create(ModalPage, { message: `Meeting 1 time: ${this.meetingTimes.meeting1}`});
myModal.present();
}
}
我想这对你有帮助。 查找工作演示 HERE
关于angular - 如何在 AlertController - Ionic 3 中使用变量显示消息正文?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54601459/