角度 2.0 相当于 $scope.$apply

Posted 2023-02-22

【中文标题】角度 2.0 相当于 $scope.$apply

【英文标题】：angular 2.0 equivalent to $scope.$apply

【发布时间】：2016-01-15 10:09:12

【问题描述】：

我正在尝试开始使用 Angular 2.0，现在我想知道如何在某些外部事件更改数据后启动对视图的更新。

详细来说，我有一个谷歌地图和一个用于地图上点击事件的处理程序。用户点击地图后，我将点击的纬度和经度存储到控制器上的变量中

this.lat = event.latLng.lat();
this.lon = event.latLng.lon();

在视图中我想显示这些值

<div> this is my spot: lat and lon </div>

在 Angular 1 中，我只需将分配在控制器中包装在对 $scope.$apply() 的调用中。

在 Angular 2.0 中更新视图的首选方法是什么？

【参考方案1】：

setTimeout(function()
//whatever u want here
,0)

参考：http://blog.mgechev.com/2015/04/06/angular2-first-impressions/

【讨论】：

这行得通。有用的事实是你甚至不需要最后的 ,0 。您可以完全跳过该参数。

【参考方案2】：

大多数情况下，您无需执行任何操作即可更新视图。 zone.js 会为你做一切。

但是如果出于某种原因您想手动触发更改检测（例如，如果您的代码在角度区域之外运行），您可以使用LifeCycle::tick() 方法来执行此操作。见this plunker

import Component, LifeCycle, NgZone from 'angular2/angular2'

@Component(
  selector: 'my-app',
  template: `
    <div>
      Hello world!!! Time:  time .
    </div>
  `
)
export class App 
  time: number = 0;

  constructor(lc: LifeCycle, zone: NgZone) 
    zone.runOutsideAngular(() => 
      setInterval(() => 
        this.time = Date.now();

        lc.tick(); // comment this line and "time" will stop updating
      , 1000);
    )
  
  doCheck() 
    console.log('check', Date.now());
  

【讨论】：

谢谢！看起来我在角度区域之外（在谷歌地图的点击回调内）。调用 lc.tick() 就可以了：-)

嗯，也许NgZone:run 更适合您的用例。它在角度区域内执行回调，执行后运行 LifeCycle.tick()。

我同意@alexpods。还有另一个问题可以这样解决，NgZone:run (***.com/questions/31352397/…)

另一种方法是像这样使用ChangeDetectorRef：this.chRef.detectChanges()。

LifeCycle 不再存在：/

【参考方案3】：

尝试从角核心导入 ChangeDetectorRef 如下

import Component, ChangeDetectorRef from '@angular/core';

在构造函数中

constructor(private chRef: ChangeDetectorRef)
  chRef.detectChanges(); //Whenever you need to force update view

【讨论】：

在新的 Angular 版本中是 import Component, ChangeDetectorRef from '@angular/core';