文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

angular 5调用绑定类的函数将导致该函数被无限次调用

Angular 5是一种流行的前端开发框架，它提供了丰富的功能和工具来构建现代化的Web应用程序。在Angular 5中，调用绑定类的函数可能会导致该函数被无限次调用的问题，这是由于Angular的变更检测机制引起的。

在Angular中，当组件的属性发生变化时，Angular会自动检测并更新相关的视图。为了实现这一机制，Angular会在每次变更检测周期中比较组件的属性值，如果发现有变化，则会触发相应的更新操作。

当调用绑定类的函数时，如果该函数内部修改了组件的属性值，那么Angular会认为组件的属性发生了变化，从而触发变更检测。而在变更检测过程中，又会再次调用绑定类的函数，形成了无限循环调用的情况。

为了解决这个问题，可以采取以下几种方法：

  1. 使用Angular的ChangeDetectionStrategy策略：可以通过在组件中设置ChangeDetectionStrategy为OnPush来改变变更检测的策略。这样做会使得变更检测仅在组件的输入属性发生变化时才触发，而不会在调用绑定类的函数时触发。
  2. 使用ngDoCheck生命周期钩子：ngDoCheck是Angular提供的一个生命周期钩子，可以在组件的变更检测周期中执行自定义的逻辑。通过在ngDoCheck中手动检测属性的变化，并避免无限循环调用，可以解决该问题。
  3. 优化函数的逻辑：检查绑定类的函数是否真正需要在每次变更检测时都被调用。如果不需要，可以考虑将函数的逻辑进行优化，避免不必要的调用。

需要注意的是，以上方法仅适用于解决调用绑定类函数导致无限调用的问题，并不能解决其他可能导致无限调用的情况。

关于Angular的更多信息和相关产品，您可以参考腾讯云的文档和资源：

请注意，以上链接仅供参考，具体产品和服务选择应根据实际需求进行评估和决策。

相关搜索:Ajax (对于php函数)在单选按钮单击时调用的jquery会导致javascript函数被取消引用Angular 2基于div上应用的类调用函数Angular 5-从父组件调用子组件的函数为什么我的类构造函数被重复调用？函数可以引用被调用的类吗？函数在Angular中的订阅调用完成之前被调用在Word Interop中调用函数时库中的类名被损坏如何在Angular 5服务的构造函数中侦测/模拟方法调用？如何在ReactNative中调用不同文件(无类/组件)的组件函数如何在函数被调用后将隐藏输入的值设置为函数的值？
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

AngularJS的digest循环和$apply

结果查阅资料，终于得知，使用第三方框架（比如jQuery），或者调用setTimeout()，会导致其运行在AngularJS上下文外部，可以使用apply()函数让Angular返回apply()函数让...$watch列表 angular跟踪变化，是通过给watch列表添加一个监控函数做到的，需要注意的是所有绑定给同一watch列表添加一个监控函数做到的，需要注意的是所有绑定给同一scope对象的UI元素...循环之前，会触发该值（ng-model）上运行的验证和格式化操作； （5）由于在digest循环中值发生了变化，angular需要再次运行这一循环以确定它没有改变作用域对象上的其他值。...当手动处理事件，使用第三框架（比如jquery）或者调用setTimeout都可以使用apply()函数将值传递到angular应用中。...（1）不建议在控制器中使用$apply()，因为这样会导致难以测试。 （2）jquery和angular同时使用被视为一个肮脏的行为。

3.1K41

angular面试题及答案_angular面试

首次调用一定发生在ngOnInit前，值得注意的是该方法仅限于对象的引用发生变化时才会触发。...ngOninit:初始化指令或组件，在angular第一次显示展示组件的绑定属性后调用，该方法只会调用一次 ngDocheck:检测 ngAfterContentInit:当把内容投影进组件之后调用，...第一次调用ngDocheck()之后调用，只调用一次，只适用于组件 ngAfterContentChecked:每次完成被投影组件内容的变更检测之后调用，只适用于组件 ngAfterViewInit...module声明了哪些模块可以被其他模块使用，依赖注入了哪些类，以及启动的component，模块来管理组件，使app实现模块化。 21. 怎样在组件中选择一个元素？...当类被初始化之后，构造函数会被调用 ngOnInit ngOnInit 是angular中OnInit钩子的实现，用来初始化组件。

10.9K120

【17】进大厂必须掌握的面试题-50个Angular面试

不仅如此，Angular还具有内置数据流，类型安全性和模块化CLI的功能，被认为是成熟的Web框架。 5.什么是角度表达式？...它是一个具有 get（）方法的对象，该方法被调用以创建服务的新实例。提供者还可以包含其他方法，并使用 provide来注册新的提供者。 中级–面试问题 16. Angular是否支持嵌套控制器？...Angular组件具有离散的生命周期，其中包含从出生到死亡过渡的不同阶段。为了更好地控制这些阶段，我们可以使用以下方法将其连接： 构造函数： 通过在类上调用new创建组件或指令时将调用它。...在第一个ngOnChanges之后，该挂钩在其生命周期中仅被调用一次。 ngDoCheck：每当调用给定组件的更改检测器时，便会调用它。这使您可以为提供的组件实现自己的变更检测算法。...在这里，引擎盖下的run（）将调用tick本身，然后参数将在tick之前获取函数并执行它。

41.1K51

Angular 从入坑到挖坑 - 组件食用指南

在组件类中，通过使用 @Component 装饰器 1 用来将类声明为组件类，并为这个组件类配置一些元数据 2，以决定该组件在运行期间该如何处理、实例化和使用 装饰器中存在三个基础的配置参数，用来完成组件与视图之间的关联...，将数据源与视图进行绑定，从而实现源数据与用户呈现的一致性 从数据源到视图：插值、组件中的属性、dom 元素的 property 3、css 样式、css 类 从视图到数据源：事件 视图与数据源之间的双向绑定...五、组件的生命周期钩子函数 当 angular 在创建、更新、销毁组件时都会触发组件的生命周期钩子函数，通过在组件中实现这些生命周期函数，从而介入到这些关键时刻 钩子函数 触发时机 ngOnChanges...被绑定的输入属性值发生变化时触发，会调用多次；如果没有使用到父子组件传值，则不会触发 ngOnInit 初始化组件时会调用一次，一般是用来在构造函数之后执行组件复杂的初始化逻辑 ngDoCheck 只要数据发生改变就会被调用...---- 装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上，就像是 C# 中的特性↩ 元数据是用来描述数据的数据项，例如这里的 selector 是为了描述 Component

15.8K30

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

两者的区别在于页面没有加载完毕 {{val}} 会直接显示到页面，直到 Angular 渲染该绑定数据（这种行为有可能将 {{val}} 让用户看到）；而 ng-bind 则是在 Angular 渲染完毕后将数据显示...通常写代码时我们无需主动调用 $apply 或 $digest 是因为 angular 在外部对我们的回调函数做了包装。...angular 会因为这个事件回调函数什么都没做就不进行脏检查吗？不会。 然后：#span1 被隐藏掉了，会检查绑定在它上面的表达式吗？尽管用户看不到，但是 $scope....定义为Javascript的原型类，在html中直接绑定原型类的属性和方法 优点： 可以使用 Javascript 的原型类， 我们可以使用更加高级的 ES6 或者 TypeScript 来编写 Controller...编译一段HTML字符串或者DOM的模板，产生一个将scope和模板连接到一起的函数。

7.7K40

AngularDart 4.0 高级-管道 顶

AsyncPipe也是有状态的。 管道保持对输入Stream的订阅，并在到达时保持该Stream的值。 下一个示例使用异步管道将消息字符串（message）Stream绑定到视图。...]; } 异步管道将样板文件保存在组件代码中。 该组件不必订阅异步数据源，提取已解析的值并将其公开以进行绑定，并且必须在其销毁时取消订阅（内存泄漏的有效来源）。...回过头来，你回顾了FlyingHeroesImpurePipe--一个纯粹功能的不纯管道。 总是要实现一个纯函数的纯管道。 否则，你会看到很多关于表达式被检查后改变的控制台错误。...附录：无FilterPipe或OrderByPipe Angular不提供过滤或排序列表的管道。 熟悉Angular 1的开发人员将这些知识视为filter和orderBy。...当Angular每秒钟多次调用这些管道方法时，即使是中等大小的列表，用户体验也会严重降级。 filter和orderBy经常被滥用在Angular 1应用程序中，导致投诉Angular本身很慢。

6.3K20

浅谈Hooks&&生命周期(2019-03-12)

Vue-lifecycle Angular生命周期: Hook Purpose and Timing ngOnChanges() Angular（重新）设置数据绑定输入属性时的响应。...该方法接收[SimpleChanges](https://angular.io/api/core/SimpleChanges)当前和先前属性值的对象。...ngOnInit()在一个或多个数据绑定输入属性发生更改 之前和之后调用。 ngOnInit() 在Angular首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。...[ngAfterContentInit()] 在Angular将外部内容投影到组件的视图/指令所在的视图后进行响应。在第一次之后 调用一次ngDoCheck()。...被渲染的时候，这个 useState 调用都会被执行，useState 自己肯定不是一个纯函数，因为它要区分第一次调用（组件被 mount 时）和后续调用（重复渲染时），只有第一次才用得上参数的初始值，

3.2K40

Angular2 之 单元测试

组件的测试 单独的service测试 Angular的测试工具 Angular的测试工具类包含了TestBed类和一些辅助函数方法，当时这不是唯一的，你可以不依赖Angular 的DI（依赖注入）系统，...通过将测试代码放到特殊的异步测试区域来运行，async函数简化了异步测试程序的代码。 接受无参数的函数方法，返回无参数的函数方法，变成Jasmine的it函数的参数。...和async一样，它也接受无参数函数并返回一个函数，变成Jasmine的it 函数的参数。 fakeAsync函数通过在特殊的fakeAsync测试区域运行测试程序，让测试代码更加简单直观。...tick tick函数是Angular测试工具之一，是fakeAsync的同伴。 它只能在fakeAsync的主体中被调用。...你仍然可以将接受 done回调的函数传给it。 但是，你必须链接承诺、处理错误，并在适当的时候调用done。

5.5K20

Angular学习笔记（一）

Angular 模块都是一个带有 @NgModule 装饰器的类。 NgModule 是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。...指令 Angular 模板是动态的。当 Angular 渲染它们时，它会根据指令提供的操作对 DOM 进行转换。 服务 服务是一个广义范畴，包括：值、函数，或应用所需的特性。...Angular 使用依赖注入来提供新组件以及组件所需的服务。 2. 模板与数据绑定 绑定的类型可以根据数据流的方向分成三类： 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。...生命周期 ngOnChanges() 当 Angular 重新设置数据绑定输入属性时响应。该方法接受当前和上一属性值的 SimpleChanges 对象。...第一次 ngDoCheck() 之后调用，只调用一次。 只适用于组件。 ngAfterContentChecked() 每次完成被投影组件内容的变更检测之后调用。

3.3K20

Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

解决方案2 如果依然使用javascript原生的定时方法，那么则需要在修改完视图的数据模型后，手动调用$scope.$apply()方法来将数据模型的变动同步到html页面中。 二....则会打印出自定义指令中scope.pagination的值，并将该值进行自增 接下来的测试操作，我们将按照如下的流程进行： 点击5次+1按钮，再点击5次数字标签 点击show $scope.testInfo...我们看到，第一次点击数字标签时，控制台打出了link函数中scope.pagination的值为5，这说明$scope.testInfo.content的值被传递给了自定义指令中的scope.pagination...每当WatchCollection中有变量出现变动时，Angular就会遍历WatchCollection来查看是否有其他监控中的变量也被影响，每当有一个变量被影响，Angular都会在遍历后再进行一次遍历...我们可以回顾一下上面在使用双向数据绑定发生异常时的场景： 使用了原生的定时器（Angular中你应该使用$interval,$timeout服务） 用类原生方法(bind)为元素添加事件监听器，并在回调函数中修改了变量的值

3.4K20

Angular constructor vs ngOnInit

constructor 在 ES6 中就引入了类，constructor（构造函数）是类中的特殊方法，主要用来做初始化操作，在进行类实例化操作时，会被自动调用。...组件生命周期中的一个钩子，Angular 中的所有钩子和调用顺序如下： ngOnChanges —— 当数据绑定输入属性的值发生变化时调用 ngOnInit —— 在第一次 ngOnChanges 后调用...用于在 Angular 获取输入属性后初始化组件，该钩子方法会在第一次 ngOnChanges 之后被调用。...constructor 应用场景 在 Angular 中，构造函数一般用于依赖注入或执行一些简单的初始化操作。...，我们可以知道类中的静态属性是属于 AppComponent 构造函数的，而成员属性是属于 AppComponent 实例。

1.4K20

(转) 别再对 Angular 表单的 ControlValueAccessor 感到迷惑

formControl 指令，都会调用 setUpControl 函数来让表单控件和DefaultValueAccessor 实现交互（译者注：意思就是上面代码中绑定的 formControl 指令，在其自身实例化时...，会调用 setUpControl() 函数给同样绑定到 input的 DefaultValueAccessor 指令做好安装工作，如 L85，这样 formControl 指令就可以借助 DefaultValueAccessor...表单控件是如何数据同步的（译者注：作者贴的可能是 Angular v4.x 的代码，v5 有了点小小变动，但基本相似）： export function setUpControl(control: FormControl...由于我们将实现的是新的组件通信方式，所以不需要标准的输入输出属性绑定方式，那就移除相关代码吧。...，并且被 Angular 用来和 formControl同步，通常是使用组件类或指令来注册。

3.7K20

Angular面试题_session面试题

二十、angular 的缺点有哪些？ 1.强约束 导致学习成本较高，对前端不友好。 但遵守 AngularJS 的约定时，生产力会很高，对 Java 程序员友好。...5.最根本的好处 在 angular 1.2 以前，在 view 上的任何绑定都是直接绑定在 $scope 上的 function myCtrl($scope){ $scope.a = ‘aaa...function myCtrl(){ // 使用 vm 捕获 this 可避免内部的函数在使用 this 时导致上下文改变 var vm = this; vm.a = ‘aaa’; }...injector 是假设函数的参数名就是依赖的名字，然后去查找依赖项，那如果按前面栗子中那样注入依赖，代码压缩后（参数被重命名了），就无法查找到依赖项了。...函数中，如果指令要进行数据绑定，那么配置在link函数中。

4.9K150

进阶 | 重新认识Angular

Vue使用的发布订阅模式，是点对点的绑定数据。 Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。...Angular 核心：使用脏检测（新/旧值比较）Diff 当Model发生变化，会检测所有视图是否绑定了相关数据，再更改视图 Zone.js（猴子补丁：运行时动态替换） 将Javascript中异步任务包裹一层...模块化思想层层包裹，结构组织也层层地抽象封装，树结构的设计思想从模块组织到依赖注入延伸。 模块修饰器 修饰器（Decorator）是一个函数，用来修改类的行为。...Promise需要调用then或者catch才能够执行，catch是另一种形式的then，调用then或者catch之后，它返回一个新的Promise，这样新的Promise也可以同样被调用，所以可以做成无限的...Rx的observable被subscribe之后，并不是继续返回一个新的observable，而是返回一个subscriber，这样用来取消订阅，但是这也导致了链式断裂，所以它不能像Promise那样组成无限

2.5K10

基础 | Angular2生命周期钩子函数

比如，OnInit接口的钩子方法叫做ngOnInit， Angular在创建组件后立刻调用它 生命周期执行顺序 ngOnChanges 在有输入属性的情况下才会调用，该方法接受当前和上一属性值的SimpleChanges...中新增的属性，当class类实例化的时候调用constructor，来初始化类。...Angular中的组件就是基于class类实现的，在Angular中，constructor用于注入依赖。 ngOnInit是Angular中生命周期的一部分，在constructor后执行。...在Angular中用于初始化变量和数据绑定等 NgChanges 当我们监听了OnChanges钩子。...一旦检测到该组件(或指令)的输入属性发生了变化，Agular就会调用ngOnChanges()方法 效果演示 DoCheck 当组件中属性或函数发生变化时DoCheck会执行脏值检测，遍历所有变量

75040

前端面试题angular_Vue前端面试题

这样会导致，在 ng-if 中用基本变量绑定 ng-model，并在外层 div 中把此 model 绑定给另一个显示区域，内层改变时，外层不会同步改变，因为此时已经是两个变量了。...配置的 service，get 中返回的，就是用 factory 创建 service 的内容 从底层实现上来看，service 调用了 factory，返回其实例；factory 调用了 provider...，可以不返回（绑定到 this 的都可以被访问）； provider 是加强版 factory，返回一个可配置的 factory。...5、angular 中控制器之间如何通信？...，所以必须进行一次大检查，将所有“注册”过的值全部检查一遍，一次检查称为一个周期，每次最少检查两遍，因为第二遍用来确认，前一遍的变动中是否有数据的变动，导致了其他数据的变动，如果第二次有变动的话，会再执行一遍

14.1K20

【干货】2017年值得关注的JavaScript框架与主题

Callbacks: 回调是JavaScript异步编程的基本概念，某个回调函数会在某个异步操作结束后被调用，就好比领导对你说：好好干你的工作，做好了跟我汇报下。...Promises: Promise是处理将来值的方法之一，当某个函数返回的是Promise对象时，你可以调用该对象的then函数来获取异步传入的值。...npm: 官方开源的JavaScript包管理工具。 git & GitHub: 分布式版本管理系统，很适合团队协作。 Babel: 能够将ES6代码编译到ES5使之能够兼容老版本浏览器。...这种单向数据流与当时以Angular 1 / Knockout为代表的双向数据绑定形成对比，双向数据绑定中如果发现绑定的数据发生变化则会立刻触发重渲染，而无论当前是否处于渲染流程中，这一点也就导致了Reflows...首先，我会去Google Trends中查看各个框架关联关键词的被搜索情况。 来源：中国物联网

1.2K60

AngularDart4.0 指南- 模板语法一 顶

学习如何编写显示数据并在数据绑定的帮助下使用用户事件的模板。 Angular应用程序管理用户看到和可以做的事情，通过组件类实例（组件）和面向用户的模板的交互来实现这一点。...模板语句不能引用类的静态属性，也不能引用顶层变量或函数，如来自dart:html的window或document 。 它们不能直接调用从dart:math导入的print或函数。...绑定语法：概述 数据绑定是一种协调用户看到应用程序数据值的机制。 虽然您可以将值推送到HTML中，并从HTML中提取值，但是如果将这些杂事转换为绑定框架，则应用程序更易于编写，读取和维护。...表达式语言本身是为了保证您的安全。您不能为属性绑定表达式中的任何东西赋值，也不能使用增量和减量运算符。 当然，该表达式可能会调用具有副作用的属性或方法。 Angular无法知道或阻止你。...该表达式可以调用类似getFoo()的东西。 只要你知道getFoo()是做什么的。如果getFoo()改变了某些东西，而且碰巧绑定了某些东西，你将冒着一定的风险。

5.1K10

Angular与MVVM框架

作者更希望大家关注于实现一个成功的，具有好的设计以及遵循“分离关注点”原则的应用程序，而不是去争论MV*，所以他将angular称为MVW框架，是什么并不重要，只要适合你的应用就行。...一旦找到一个，它就会被加入一个指令列表中，这个列表是用来记录所有和当前DOM相关的指令的。 一旦所有的指令都被确定了，会按照优先级被排序，并且他们的compile方法会被调用。...通过调用上一步所说的链接函数来将模板与作用域链接起来。这会轮流调用每一个指令的链接函数，让每一个指令都能对DOM注册监听事件，和建立对作用域的的监听。这样最后就形成了作用域的DOM的动态绑定。...更多可以参考[译]ng指令中的compile与link函数解析 $digest $watch存储了监听函数，当作用域里的变量发生变化时，调用$digest方法便会执行该作用域以及它的所有子作用域上的相关的监听函数...对于像游戏和有图形界面的编辑器之类的应用，会进行频繁且复杂的DOM操作，和CRUD应用不同。因此，可能不适合用Angular来构建。在这种场景下，使用更低抽象层次的类库可能会更好。

3.9K90
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券