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