`

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

阅读更多

我在自己的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)。因此,建议不要在属性上绑定方法,因为调用太频繁了,最好预先计算好然后绑定一个值就好。

0
0
分享到:
评论

相关推荐

    table无限循环无缝滚动.zip

    "table无限循环无缝滚动"是一个功能,它能够让用户在浏览长表格时体验到类似轮播的效果,即当表格底部到达时,表格内容会自动重新排列,让顶部的内容再次出现,形成一种无限滚动的视觉效果。这一技术主要依赖...

    前端项目-angular-slick-carousel.zip

    4. **Angular Directive for Slick Carousel**:在Angular项目中使用Slick Carousel,通常会通过创建一个自定义指令来封装其API,使得在Angular模板中可以方便地使用和配置轮播组件。这样可以将复杂的JavaScript逻辑...

    浅谈AngularJs 双向绑定原理(数据绑定机制)

    在AngularJS中,双向绑定是其核心特性之一,它极大地简化了前端开发,尤其是在构建复杂的单页应用(SPA)时。双向绑定使得视图(View)与模型(Model)之间保持同步,无论用户在界面上进行任何操作,都能即时反映到...

    angular-slick:光滑轮播的Angular指令

    2. **自定义选项** - 类似于原生的Slick Carousel,Angular-Slick允许设置多种参数来自定义轮播的行为,如自动播放、无限循环、分页指示器等。 3. **双向数据绑定** - 通过Angular的数据绑定机制,轮播的状态(如...

    Angular中实现树形结构视图实例代码

    在某些较旧的版本中,如Angular 1.4.9及以下,这样的递归模板可能会导致无限循环和性能问题。然而,从Angular 1.5.0开始,这个问题得到了解决,可以安全地在模板中嵌套使用自定义指令。 如果遇到无限递归的问题,...

    详解angular脏检查原理及伪代码实现

    为了解决这个问题,AngularJS引入了$digest的优化策略,如$watchGroup和$watchCollection,以及更高级别的变更检测库如ChangeDetectionStrategy在Angular(2+)中。 总的来说,AngularJS的脏检查机制是其双向数据...

    angular-swiper-repeat

    总的来说,"Angular-Swiper-Repeat" 是一个提升AngularJS应用中滑动效果的实用工具,通过结合Swiper库的优势,实现了高性能的无限循环滑动,为用户提供更流畅的浏览体验。对于需要构建动态滑动内容的开发者来说,这...

    angular-typewriter:打字机角度指令

    在本文中,我们将深入探讨Angular-Typewriter的工作原理、使用方法以及如何在实际项目中应用。 ### 1. Angular基础知识 在理解Angular-Typewriter之前,我们需要回顾一下Angular的基本概念。Angular是一个强大的...

    前端MVVM框架解析之双向绑定

    // 防止无限循环 value = newVal; // 触发视图更新 triggerUpdate(); } }); } ``` `defineReactive`函数用于创建响应式属性,如果value也是一个对象,我们会递归地对其进行观察。当设置新值时,`...

    图片循环播放 、侧滑、点击,仿淘宝

    在IT行业中,图片循环播放、侧滑和点击是常见的交互设计元素,特别是在电商应用中,如淘宝的广告播放页面。这种功能通常用于展示商品、活动或推广信息,以吸引用户的注意力并提供良好的用户体验。以下是对这些知识点...

    angular-sly-directive:狡猾的角度指令

    6. **自定义配置**: "angular-sly-directive"可能允许用户通过属性或配置对象来自定义Sly.js的行为,比如设置滚动速度、是否启用无限循环等。掌握如何配置这些选项可以让你更好地适应各种场景。 7. **兼容性和性能...

    infinite-badlands-3480:销售人员+ Angular js

    标题中的“无限荒地3480:销售人员+ Angular js”可能是指一个项目或软件应用,其中“无限荒地3480”可能是项目的名字,而“销售人员”可能指的是该应用的目标用户群体或者该应用专注于销售领域的一个特性。Angular ...

    angular内置provider之$compileProvider详解

    这个方法用于限制脏检查时变化检测的次数,超过限制后会触发错误,帮助开发者识别无限循环问题。 7. `commentDirectivesEnabled(enabled)` 和 `cssClassDirectivesEnabled(enabled)` 这两个方法控制是否启用基于...

    ionic samples

    在 Ionic 中,Angular 负责应用的逻辑控制,处理数据绑定、路由管理、服务注入等功能。Ionic 的 UI 组件与 Angular 的数据模型紧密结合,使得开发者可以轻松地更新视图以反映模型的变化。 **Ionic Demo 项目——...

    TraineesWeb:使用 ui.router、LocalStorage、分页的示例 Angular Web 应用程序

    在 Angular 中,可以使用第三方库如 `ngInfiniteScroll` 或自定义指令来实现无限滚动分页,或者结合 `ui.router` 来管理不同页码对应的状态。 **4. Angular 框架特性** Angular 提供了许多强大的特性,如双向数据...

    Ng-if / ng-hide不会在HTML页面上实时更新。

    如果在一次摘要循环内检测到多次变更,它会停止更新,防止无限循环。 3. **异步问题**:在异步事件(如setTimeout或$http请求)中更新模型,可能导致视图无法立即反映变化,因为这些操作不在Angular的上下文中。使用...

    AngularJS双向数据绑定原理之$watch、$apply和$digest的应用

    如果发现变化,`$digest`会再次运行,直到没有更多的`$watch`更新,或者达到预设的最大迭代次数(默认为10次)以防止无限循环。一旦`$digest`循环结束,所有必要的DOM更新都会被执行,使视图保持与模型同步。 在...

    KLM-Carousel:使用 Bower 和 Angular JS 的 KLM Carousel

    4. **无限循环**:设置后,轮播可以无限循环播放,增加用户体验的连贯性。 5. **自动播放**:可以设定轮播自动播放,间隔可调,增加了互动性。 6. **API 控制**:提供丰富的 API 接口,允许在代码中控制轮播的起始、...

    横向滑动选项框

    在IT行业中,横向滑动选项框是一种常见的交互设计元素,特别是在移动应用和网页设计中,它为用户提供了方便的导航方式。标题“横向滑动选项框”指的是一个可以通过水平滑动手势来切换不同内容或页面的组件。这种设计...

    前端项目-ng-slider.zip

    Awesome Slider通常是指那些设计精美、功能丰富的滑动组件,它可以提供平滑的动画效果,自定义样式,以及多种交互模式,比如单滑块、双滑块、无限循环等。 在AngularJS中,指令是一种特殊类型的组件,它们可以扩展...

Global site tag (gtag.js) - Google Analytics