Angular 如何在AlertController-Ionic 3中使用变量显示消息正文？

我在中有以下代码：

home.html

<button (click)="doAlert()" color="primary" ion-button small round>
    <div><span float-right> {{ meetingTimes.meeting1 }} </span></div>
</button>

<div id="container">
  <ion-content padding>
    <p class="message">{{message}}</p>
    <button ion-button color="danger" (click)="close()">OK</button>
  </ion-content>
</div>

在

home.html

中，

{{meetingTimes.meeting1}}

工作正常，但单击时如何在doAlert方法中显示/使用相同的值

我知道我不能在组件中使用这个

{{{meetingTimes.meeting1}}

，但是正确的方法是什么

我尝试过：

消息：“会议1次：”+会议时间。会议1，

，但没有成功。

试试这个

  doAlert() {
  let meetingTime = this.alerCtrl.create({
    title: 'Weekly Meeting Times',
    message: `Meeting 1 time: ${this.meetingTimes.meeting1}`,
    buttons: ['Close']
  });
  meetingTime.present()
}

---

工作。

您可以使用

ModalContoller

来完成。您可以从

home.html

以模式对话框的形式打开另一个页面。让我们把页面设置为

modal.html

modal.html

<button (click)="doAlert()" color="primary" ion-button small round>
    <div><span float-right> {{ meetingTimes.meeting1 }} </span></div>
</button>

<div id="container">
  <ion-content padding>
    <p class="message">{{message}}</p>
    <button ion-button color="danger" (click)="close()">OK</button>
  </ion-content>
</div>

ModalPage.ts

doAlert() {
  let meetingTime = this.alerCtrl.create({
    title: 'Weekly Meeting Times',
    message: 'Meeting 1 time:' {{ meetingTimes.meeting1 }},
    buttons: ['Close']
  });
  meetingTime.present()
}

#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;
}

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();
  }
}

我想这对你有帮助。

---

查找工作演示

尝试使用消息：

“会议1次：”+this.meetingTimes.meeting1

非常感谢！我需要为不同的会议显示多次。因此，是否有其他方法可以这样做，以便可以从另一个页面加载消息体，或许可以在其中添加CSS以清晰地表示消息？。再次感谢您。谢谢您，此解决方案也有效。是否有其他方法可以从另一个页面加载消息正文，或许我可以在其中添加CSS以更清楚地表示警报中的消息？不，使用

AlertContoller

是不可能的。如果您需要它，您必须

ModalController

您的示例和演示链接非常有用。但是，当打开模式时，我收到一条错误消息

无法读取未定义的属性'meeting1'

，但是

{{meetingTimes.meeting1}}

在home.html页面中工作正常。您需要将其正确传递给模式。如果你能像我的演示一样在stackblitz中复制你的问题。我可以给你答案。但我认为你问的答案是正确的。因此，请将此标记为正确答案。如果您可以将

无法读取未定义但{{meetingTimes.meeting1}}

的属性“meeting1”作为一个单独的问题来提问，则更好，因为这不是您从问题中提出的问题。