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

Question

我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（），再后来我希望能修改如下所示使用科尔多瓦插件调用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')"，但没有成功。

请指教。

Answer 1

您的HTML提醒被Angular2 Sanitiser删除。如果您想留下来，您应该使用bypassSecurityTrust函数将其添加到“可信列表”中。

但是这不会解决您的问题，因为您已经假定在Alert的副标题上会出现Angular2绑定。该警报不是为您尝试使用它的方式而设计的。

参考AlertController's documentation，你可以看到如何使用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(); 
}