“ this” / Angular范围。无法达到变量。

Question

请原谅我的无知，但我很难理解Angular的范围，也许是一般情况。

我正在尝试创建一个可以在页面上拖动的html元素。拖动结束时，我想保存元素的位置，以便在重新加载页面时该元素的位置保持不变。我将重构所有这些内容，因此到目前为止的代码还很混乱。

页面加载后，我将从数据库中检索CSS样式值/属性。

我有HTML文档的事件侦听器，该事件侦听器应该更改Angular组件的属性。但是似乎我只能在事件侦听器触发的函数中访问这些值。当我在这些函数中管理日志“ this”时，它将返回我的HTML文档。但是，如果我在其他任何功能（未由事件侦听器触发的功能）中管理日志“ this”，则会返回一系列对象，但事件侦听器不应修改其中的任何一个。

所以，我知道我在范围方面有问题，但是我想知道如何让事件监听器访问组件中的属性。我如何在两者之间进行交流？

export class GeneralComponent implements OnInit {
  stylings: Styling[];
  el: HTMLElement;
  dragx: number;
  dragy: number;
  styleAtPlay: Styling;
  constructor(private dataService:StylingService) {
    this.dataService.getStyling().subscribe((stylings) => {
      this.stylings = stylings;
      //console.log(this.stylings);
    })
  }

  ngOnInit() {
    this.el = document.getElementById('drag');
    let dragP = document.getElementById('elPosition');
    let rect = this.el.getBoundingClientRect();
    dragP.innerHTML = rect.left.toString() + ", " + rect.top.toString(); 
    document.addEventListener('dragstart', this.dragstart);
    document.addEventListener('ondrag', this.ondrag);
    document.addEventListener('dragover', this.dragover);
    document.addEventListener('dragend', this.dragend);
    //document.addEventListener('mouseover', this.mouseover);
  }

  dragstart(e){
    console.log('DRAGGING...');
    let x = e.pageX;
    let y = e.pageY;
    let drag = document.getElementById('drag');
    var rect = drag.getBoundingClientRect();
    let elX = rect.left;
    let elY = rect.top;
    this.dragx = elX - x;
    this.dragy = elY - y;
    console.log("element position" + elX + ", " + elY);
    console.log("mouse position:" + x + ", " + y);
    console.log("difference" + this.dragx + ", " + this.dragy);
  }

  ondrag(e){
    console.log('dragging');
  }

  dragend(){
    console.log(this.styleAtPlay);
  }

  dragover(e){
    let mousePosition = document.getElementById('mousePosition');
    let drag = document.getElementById('drag');
    let dragPosition = document.getElementById('elPosition');
    let x = e.pageX + this.dragx;
    let y = e.pageY + this.dragy;

    mousePosition.innerHTML = x + ", " + y;
    let rect = drag.getBoundingClientRect();
    dragPosition.innerHTML = rect.left.toString() + ", " + rect.top.toString(); 

    this.styleAtPlay = {
      _id: null,
      elementId: "drag",
      properties: [{
        property: "top",
        value: y  + "px"
      },
      {
        property: "left",
        value: x + "px"
      }]
    }

    drag.style.position = "absolute";
    drag.style.top = y  + "px";
    drag.style.left = x + "px";

    console.log("test" + this.dragy);

  }

  click(){
    console.log("click");
    console.log(this);
    let test = new Styling;
    test.elementId = "elementId sample";
    this.updateList(this.stylings, test.elementId);
  }

  updateList(stylings: Styling[], elementId: String){
    console.log("----");
    console.log(this);
    console.log("----");
    for (let i = 0; i < stylings.length; i++){
      if (stylings[i].elementId == elementId){
        for (let j = 0; j < stylings[i].properties.length; j++){
          for (let k = 0; k < this.styleAtPlay.properties.length; k++){
            if (stylings[i].properties[j].property == this.styleAtPlay.properties[k].property){
              stylings[i].properties[j].value == this.styleAtPlay.properties[k].value;
            }
          }
        }
        return
      }
    }
    this.dataService.addStyling(this.styleAtPlay)
      .subscribe(

      ); 
  }