美文网首页天工开物angular2angular 2+ 点点滴滴
Angular 2 中的绑定的方法在无限循环吗?

Angular 2 中的绑定的方法在无限循环吗?

作者: 孙亖 | 来源:发表于2017-02-13 16:11 被阅读83次

我在自己的Ionic 2项目中,使用卡片列出数据:

<ion-card *ngFor="let item of inspects">

卡片中有一个导航按钮,根据每项的数据生成连接打开百度地图,我是这样绑定的:
页面:

 <a [href]="nav(item)" target="_blank" ion-button icon-left clear small>
        <ion-icon name="pin"></ion-icon>
        <div>导航</div>
</a>

代码:

  nav(item) {
    let url = `bdapp://map/navi?location=${item.lng},${item.lat}`;
    if (Device.platform == 'iOS') {
      url = `baidumap://map/direction?origin=34.264642646862,108.95108518068&destination=${item.lng},${item.lat}&mode=driving&coord_type=wgs84&src=webapp.navi.yourCompanyName.yourAppName`;
    }
    console.log(url);
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

我查看console,发现一直在输出:

console一直在输出

原来这是Angular2在change detection cycle中不停的调用绑定的方法nav(item)。因此,建议不要在属性上绑定方法,因为调用太频繁了,最好预先计算好然后绑定一个值就好。

相关文章

  • Angular 2 中的绑定的方法在无限循环吗?

    我在自己的Ionic 2项目中,使用卡片列出数据: 卡片中有一个导航按钮,根据每项的数据生成连接打开百度地图,我是...

  • [angular]遍历Array的方法:for, forEach

    方法一,for…of这个貌似是最常用的方法,angular 2中HTML语法绑定也是要的这种语法。 方法二,for...

  • Angular 入门

    Angular介绍 Angular安装、创建项目、目录结构、组件、服务 创建组件、绑定数据、绑定属性、数据循环、条...

  • Angular小积累

    angular自动生成组件命令: 绑定事件: 模板中循环语句: 定义数据: 属性绑定用方括号:[src]="img...

  • angular,vue,react数据双向绑定原理分析

    在不同的 MVVM 框架中,实现双向数据绑定的技术有所不同。 Angular数据绑定 Angular 采用“脏值检...

  • Angular入门0

    Angular 绑定数据 数据文本绑定 绑定HTML 3.声明属性的几种方式 4.绑定属性用[]包裹 5.数据循环...

  • Vue.js数据双向绑定实现

    目前的几种主流前端框架中,react是单向绑定,而angular.js和vue.js是双向绑定,实现双向绑定的方法...

  • angular2--数据绑定

    今天要跟大家分享的是angular2模板中涉及到的数据绑定,Angular提供了多种数据绑定方式,可以根据数据流...

  • vue 3.x 学习前 的查缺补漏

    > vue 2 查缺补漏 >>>> 动态 属性绑定 >>>> 循环绑定 >>>> 方法传值 传入事件对象 >>>>...

  • angular动画知识点以及代码样例

    大纲 1、angular动画的相关概念2、angular动画的绑定方式3、angular动画代码实例 1、angu...

网友评论

    本文标题:Angular 2 中的绑定的方法在无限循环吗?

    本文链接:https://www.haomeiwen.com/subject/tlctwttx.html