Angular 2 无法识别 DOM 更改答案

【问题标题】：Angular 2 doesn't recognize DOM changeAngular 2 无法识别 DOM 更改
【发布时间】：2016-02-17 09:33:06
【问题描述】：

我在我的项目中使用了一些 angular 2 组件，我需要更改一些组件的位置。我首先使用 DOM 来改变位置，比如 replaceChild 或 insertBefore，类似的东西。但我注意到 angular 2 不知道 DOM 的变化，似乎我的 DOM 变化已经超过了 angular 2 的生命周期。 那么，有什么方法可以在 angular2 中编辑 DOM 吗？或者我可以通过某种方式更改组件的顺序？

为了你能理解我在做什么，我正在构建一些组件，我想拖动它们并切换它们的位置。我找了一个用 JQuery 写的插件，你可以在它的 GitHub 网站上找到一个 gif (https://github.com/Barrior/DDSort/blob/master/img/ddsort.gif)。我想实现类似 gif 的东西。

我在 GitHub 上找到了一些可能有帮助的东西，但我不知道如何使用它。 https://github.com/angular/angular/blob/master/modules/angular2/src/core/linker/view_manager.ts

【问题讨论】：

你试过使用 $scope.$apply() 吗？
@Dan，我正在使用 angular2。我使用角度标签是一个错误。对不起。

标签： javascript angular

【解决方案1】：

为遵循最佳实践，开发人员应使用ViewChild 来修改/使用 DOM。这是一个example，展示了如何使用 ViewChild 来获取 DOM 元素。您可以使用“#”标记您要使用的元素并将其放在您的组件中。

如果您想在组件中获取子元素的集合，您应该使用ViewChildren。

这个问题是在我开始学习 Angular 的时候被问到的，这是一个愚蠢的问题，我相信有很多初学者喜欢直接操作 DOM。请以“Angular 方式”更新您的 DOM。

【讨论】：

【解决方案2】：

我意识到这是不久前被问到的，但对于其他可能正在为类似这样的事情而苦苦挣扎的人... Angular 使用我相信猴子补丁异步 JavaScript 操作的区域。

要触发 Angular 可能无法获取的 DOM 更新，您可以运行 with zone...

import { NgZone } from '@angular/core';

@Injectable()
export class SomeService {

    constructor(private zone: NgZone) {}

    someFunction() {
        this.zone.run(() => {
            // Your code goes here!
        });
    }

}

看看这个blog on zones

【讨论】：