Javascript 混合角度应用程序中的真正慢速变化检测

Javascript 混合角度应用程序中的真正慢速变化检测,javascript,angularjs,angular,typescript,Javascript,Angularjs,Angular,Typescript,我们有一个混合的AngularJS/Angular 8应用程序,我们经常遇到来自不同版本框架的组件之间变化检测非常缓慢的问题。到目前为止,我们只有在角度组件中使用AngularJS组件时才会遇到这个问题。常见的情况是有一个新的Angular 8表单,其中包含一些旧的AngularJS组件,对于一些特定的AngularJS组件,组件中所做的更改传播到Angular表单并运行表单验证需要大约2到10秒的时间。UI没有挂起或其他任何东西,它保持响应,但不同版本的框架之间的通信似乎有不同的延迟。相同形式

我们有一个混合的AngularJS/Angular 8应用程序,我们经常遇到来自不同版本框架的组件之间变化检测非常缓慢的问题。到目前为止,我们只有在角度组件中使用AngularJS组件时才会遇到这个问题。常见的情况是有一个新的Angular 8表单,其中包含一些旧的AngularJS组件,对于一些特定的AngularJS组件,组件中所做的更改传播到Angular表单并运行表单验证需要大约2到10秒的时间。UI没有挂起或其他任何东西,它保持响应,但不同版本的框架之间的通信似乎有不同的延迟。相同形式的其他AngularJS组件可以无缝工作。我们还没有找到它的根本原因,但我们已经找到了一个可靠的解决办法;使用
$timeout(()=>$scope.apply()),通常位于
$onChanges
-listener中。这将触发角度变化检测并消除延迟

现在我们用AngularJS组件中使用的角度组件来面对它。我们有一个新的AngularJS组件,它本质上包装了一个,在datepicker中选择了一个日期之后,在父AngularJS表单意识到任何更改之前,会有几秒钟(最多10秒左右)的不同延迟。提到您可以使用
NgZone.run()
在使用
grademodule()
时手动触发更改检测(我们是这样做的),但我们还没有找到使其工作的方法。文档也没有详细说明如何使用
run()
。我们还尝试了
ChangeDetectorRef.detectChanges()
,但没有成功

我尝试将AngularJS父组件的
$scope
向下传递给AngularJS组件,并使用
setTimeout(()=>$scope.$apply())EventEmitter
发出更改事件后,角度组件中的code>,并且确实有效;耽搁过去了。但很明显,这不是我们真正想用的东西


关于如何消除AngularJS/Angular 8组件之间的更改检测延迟(通过手动触发角度组件的更改检测或其他方式)的任何建议?AngularJS在循环运行时出现问题($digset)。这样,AngularJS可以评估模型和视图之间的更改

在每个$digest周期中,执行观察程序。这是Angular计算附加到视图的表达式并将其重新渲染回用户的阶段

很多时候,客户端中的操作应该也需要在“Angular world”之外完成,这意味着Angular不知道这些更改,也不向用户反映这些更改。有几种方法可以解决此问题,正如您提到的使用$timeout的方法之一,方法有:

  • $apply()
  • $timeout()
  • $digest()
  • $evalAsync()
  • $evalAsync()最早是在AngularJS 1.2.X中引入的,对我来说,这是最好的使用方法

    在引入$evalAsync()之前,Angular团队正式回答,当您遇到周期问题并希望反映“Angular world”之外的变化时,请使用$timeout()

    Angular的发展和更多用户体验到这个已知问题后,Angular团队创建了$evalAsync()。此函数将在当前循环或下一个循环中计算表达式


    有关更多详细信息:

    最后,除了问题中描述的解决方案外,我们没有找到任何其他解决方案:将AngularJS
    $scope
    作为输入参数传递给角度组件,并将事件发射包装在
    $scope.$apply()
    中,即

    $scope.$apply(() => valueChange.emit(value));
    
    基于,这似乎是使用
    grademodule()
    时使其工作的唯一方法