在Ionic中如何使用ng-href？解决「无法绑定ng-href」报错

嘿，这个问题我太熟悉了！你碰到的报错是因为**ng-href是AngularJS（Angular 1.x版本）的指令**，而现在Ionic 2及以上版本都是基于Angular（2+）构建的，Angular已经不再支持这个指令了，所以才会提示“Can't bind to 'ng-href' since it isn't a known property of 'a'”。

正确的替代方案 #

根据你代码里的场景（绑定电话号码），你需要区分两种情况来处理：

1. 如果是要触发电话拨号（外部链接）

直接用Angular的属性绑定语法[href]，把电话号码拼接成tel:协议的链接：

<a [href]="'tel:' + deltaa.MobileNumber" style="color:#f3d303">{{deltaa.MobileNumber}}</a>

或者也可以用插值表达式直接写在href里：

<a href="tel:{{deltaa.MobileNumber}}" style="color:#f3d303">{{deltaa.MobileNumber}}</a>

2. 如果是跳转到应用内的路由页面

如果以后需要跳转到应用内的其他页面，要使用Angular的routerLink指令，比如：

<a [routerLink]="['/user', deltaa.userId]" style="color:#f3d303">查看用户详情</a>

优化你现有代码的完整示例 #

另外注意你代码里[innerHTML]的写法可以简化一下，去掉多余的单引号包裹，修改后的完整代码如下：

<ion-content class="bg" >
  <div *ngFor="let deltaa of delta">
    <ion-list>
      <div [innerHTML]="'<p>' + deltaa.GoogleMap + '</p>'"></div>
      <a [href]="'tel:' + deltaa.MobileNumber" style="color:#f3d303">{{deltaa.MobileNumber}}</a>
    </ion-list>
  </div>
</ion-content>

这样修改后，报错就会消失，同时电话号码也能正常触发拨号功能啦！

内容的提问来源于stack exchange，提问作者Rijwandeltax