DOM更改在我的Angular2组件中不按顺序执行

我有一个Angular2组件，它更新了我注释并允许用户编辑的导入的HTML文件。为此，我正在使用纯HTML5直接更新DOM。单击一个类应该被添加到单击的DOM元素。在浏览器中（FF和Chrome在Linux上）它会暂时添加 - 这意味着如果我立即打印节点，我会看到该类，但是在我退出该功能并打印之后，我不会。检查元素显示元素被更新为< .... class>，当元素被点击时没有值。这是工作时，我没有Angular实现它。我尝试了直接的DOM操作（使用classList.add和x.className = y），angular的Renderer，并通过NgZone运行代码，并且都具有相同的效果。有人能告诉我为什么会发生这种情况，我能做些什么来解决这个问题？注意：这是（应该是）一个简单的内部工具 - 在这一点上，我需要一个快速修复（尽管额外的建议也是受欢迎的）。（即还没有完全执行代码的几个无关紧要的部分被省略。）DOM更改在我的Angular2组件中不按顺序执行

import { Component, OnInit, NgZone } from "@angular/core"; 
import { Http, Headers, RequestOptions } from "@angular/http"; 

@Component({ 
    selector: "editor", 
    templateUrl: `editor/starterDemo.html` 
}) 
export class EditorComponent implements OnInit { 

    ngOnInit() { 
     this.fixImagePaths(); 
     this.annotate(); 
    } 

    constructor(public http: Http, public zone: NgZone) { } 
    // constructor(public http: Http, public renderer: Renderer) { } 

    fixImagePaths =() => { 
     const els = document.querySelectorAll('img'); 
     for (let i: number = 0, el: any; (el = els[i]); i++) { 
      el.src = 'editor/' + el.getAttribute('src'); 
     } 

    } 

    annotate =() => { 
     document.body.addEventListener('dragover', this.drag_over); 
     document.body.addEventListener('click', this.selectNone); 
     document.body.addEventListener('keydown', this.keyDown); 

     const els = document.querySelectorAll('img, .box'); 
     for (let i: number = 0, el: any; (el = els[i]); i++) { 
      el.draggable = true; 
      el.addEventListener('dragstart', this.drag_start); 
      el.addEventListener('click', this.selectItem); 
     } 
    } 

    selectItem = (event) => { 
     console.log("select item!"); 
     this.selectNone(); 
//  this.zone.run(() => { 
      event.target.closest('[draggable]').classList.add('dragme'); 
//  }); 
     //  this.renderer.setElementClass(event.target.closest('[draggable]').nativeElement, 'dragme', true); 
     //  console.log(event.target.closest('[draggable]')); 
     //  console.log(event.target.closest('[draggable]').classList); 
     //  console.log(event.target.closest('[draggable]').classList.contains('dragme')); 
     console.log(this.selected()); 
     return false; 
    } 

    selectNone =() => { 
     this.selected() && this.selected().classList.remove('dragme'); 
    } 

    selected =(): any => document.getElementsByClassName('dragme')[0]; 
}

HTML：

<div class='box' 
    style="background-color: white; position: absolute; top: 847px; left: 842px; z-index: 20; height: 118px; width: 351px"></div> 

<img src="Screenshot1.png" 
    style="position: absolute; top: 0px; left: -1px" /> 
<img src="Screenshot2.png" 
    style="position: absolute; top: 913px; left: 0px; z-index: 2"/> 
<img src="Screenshot3.png" 
    style="position: absolute; top: 1768px; left: 0px" /> 

<div style="height: 2000px">&nbsp;</div>

来源

2016-07-07 Dovev Hefetz

你能告诉我们相应的HTML吗？ – rinukkusu

我添加了HTML，并且我已经尝试了x.className = y。 –

我只是想出了这个问题（痛苦的时段后）。看起来在linux chrome中，返回false并不足以防止事件传播，所以click事件在addClass调用之前一次和一次之前运行两次。由于click事件在开始时有一个selectNone（）（清除现有的选定项目），因此它在添加该类之前和之后运行了selectNone（）。我添加了event.preventDefault（）;和event.stopPropagation（）;给我的事件处理程序。我希望这可以帮助某人。

来源

2016-07-07 12:28:13

DOM更改在我的Angular2组件中不按顺序执行

回答

相关问题