Question

如何从输入字段中将值设置为href标记。当用户点击href标签的值=“skype：+（来自输入的值）？”时应该调用。

<ion-content padding>
    <ion-col>
         <ion-label color="primary">Enter The No.</ion-label>
    <ion-input placeholder="Text Input"></ion-input>
      <a href="skype:+jelordrey?call">
    <button  ion-button color="secondary">test</button>
     </a>
       <!--  <a href="skype:+jelordrey?call">
               <button >
                        Click to open Skype and dial the no:+1234567890
              </button>
      </a> -->
 </ion-col>

</ion-content>
export class SkypecallPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SkypecallPage');
  }

}

Answer 1

您可以使用[attr.href]选项动态设置href值。代码看起来如下所示

<a [attr.href]="'skype:+' + name + '?call'">
 <button ion-button color="secondary">test</button>
</a>

如果在执行上述操作时，如果angluar通过在href中添加unsafe：string前缀来检测它是不安全的URL，则可能必须使用dom sanitizer使其成为安全URL。您可以查看this link以了解如何使用dom sanitizer

Answer 2

您正在使用输入从用户获取数据。因此，您必须首先在该离子输入上使用ngModel，以便您可以将模型名称绑定到href属性：

所以在你的html中使用以下内容：

<ion-item>
   <ion-label color="primary">Enter The No.</ion-label>
  <ion-input type="text" placeholder="Enter Your Number" [(ngModel)]="userNumber"></ion-input>  //you can use any model name and declare it in your ts
</ion-item>

然后使用[attr.href]将该ngModel值绑定到href属性中：

<a>[attr.href]="'skype:+' + userNumber + '?call'"</a>

并且SAJ表示可以向您发出“消毒不安全的URL值”警告，然后使用DomSanitizer，您将会很高兴。使用与SAJ提到的stack-overflow link相同的this来检查如何处理不安全的URL

将值传递给typescript ionic中的href标记

2 个答案: