Angular 2无法识别DOM更改

Question

我在项目中使用了一些有角度的2个组件，我需要更改组件的一些位置。我首先使用DOM来改变位置，比如replaceChild或insertBefore，就像那样。但是我注意到角度2不知道DOM的变化，看起来我的DOM变化超过了角度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

Answer 1

我意识到这是前一段时间被问到的，但对于其他可能会遇到类似问题的人来说...... Angular使用的区域我认为是猴子修补异步JavaScript操作。

要触发Angular可能无法获取的DOM更新，您可以运行带有区域的...

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

@Injectable()
export class SomeService {

    constructor(private zone: NgZone) {}

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

}

看看这个blog on zones

Answer 2

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

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

当我开始学习Angular的时候问了这个问题，这是一个愚蠢的问题，我相信很多初学者都喜欢直接操作DOM。请以“Angular Way”更新您的DOM。