将值传递给打字稿离子中的href标签答案

【问题标题】：pass value to an href tag in typescript ionic将值传递给打字稿离子中的href标签
【发布时间】：2018-02-15 01:10:13
【问题描述】：

如何从我的输入字段中将值设置为 href 标记。当用户单击 href 标记的值时，即 ="skype:+ (value from input)? 应该调用。

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

}

【问题讨论】：

标签： typescript ionic-framework

【解决方案1】：

您正在使用输入从用户那里获取数据。因此，您必须首先在该离子输入上使用 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>

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

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

正如 SAJ 所说，它可以向您抛出“清理不安全的 URL 值”警告，然后使用 DomSanitizer，您会很高兴。使用与 SAJ 提到的相同的 stack-overflow link 来检查如何处理不安全的 url

【讨论】：

【解决方案2】：

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

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

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

【讨论】：