Ionic 2 / Angular 2：如何从Ionic 2警报上的超链接或按钮发出单击事件？

debugcn 发表于 Dev

帕万·皮莱

我的Home.ts：

import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, 
              public alertCtrl: AlertController) {
  }


  ShowAlert(){
    let alert = this.alertCtrl.create({
        title: '<b>Information</b>',
        subTitle: `<a href="#" (click)="launchUrl('https://www.google.com')">Open Google</a>`,
        buttons: ['Close']
      });

    alert.present();
  }

  launchUrl(url){
    console.log(url);
  }
}

我的HTML看起来像：

<button  ion-button icon-only color="light" style="float: right" (click)="ShowAlert()">
Show Alert
</button>

而且我确实成功触发了警报。

现在，当我单击超链接：时Open Google，什么都没有发生。我想launchUrl()在单击超链接时调用该函数。

  launchUrl(url){
    console.log(url);
  }

一旦我能够调用launchUrl（），则稍后我希望对其进行如下所示的修改，以使用cordova插件来调用InAppBrowser。

launchUrl(url){
        this.platform.ready().then(() => {
            cordova.InAppBrowser.open(url, "_system", "location=true");
        });
    }

但是现在我什至不能调用基本launchUrl()功能。我尝试了(click)="launchUrl('https://www.google.com')"和(click)="this.launchUrl('https://www.google.com')"，但均未成功。

请指教。

n00b

警报的HTML会被Angular2 Sanitiser删除。bypassSecurityTrust如果您想留下来，应该使用功能将其添加到“受信任的列表”中。

但这并不能解决您的问题，因为您假设Angular2绑定将出现在警报的字幕上。警报不是针对您尝试使用它的方式而设计的。

参考AlertController的文档，您可以看到如何使用Button和Handler来做到这一点。

您可能需要稍微更改设计，才能立即使用Alert。例如使用这个

  ShowAlert() {
  let alert = this.alertCtrl.create({
    title: 'Information',
    message: 'Search Google?',
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Ok',
        handler: () => {
          console.log('start going to google...');
        }
      }
    ]
  });
  alert.present();
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。