Question

在Angular中，如果我想动态添加名为elem1的DOM元素并希望运行某些方法以使elem1为例如draggable，我如何确定DOM元素已准备好使用？因为如果我在DOM元素添加功能之后立即运行draggable方法，它可能在某些时候不起作用。

我在ng中尝试了OnChanges，但似乎这只适用于@Input而不是DOM。

所以我现在正在使用jQuery.ready（）函数，但我想知道Angular中是否有更优雅的方式。

Answer 1

您必须使用@ViewChild装饰器并访问ngAfterViewInit（）生命周期钩子内的元素。

像这样：

ts文件

import { Component, ElementRef, AfterViewInit, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  @ViewChild('myEl') el: ElementRef;

  ngAfterViewInit() {
    // element is ready for use
    console.log(this.el.nativeElement);
  }
}

html文件

<div #myEl></div>

Answer 2

您可以尝试使用此回答中的ngOnInit或ngAfterViewInit Angular2 equivalent of $document.ready()

但想象一下在使用页面时动态添加组件的情况。我假设您的makeDraggable函数正在制作一些元素<div data-draggable="true"></div>＆＃34;可拖动＆＃34;但问题是你尝试过一次。

也许您需要使用事件委派并在click上收听body事件，查看event.target.dataset.draggable属性以及true是否适用makeDraggable {1}}在这里运作。这是处理您不了解的组件创建时间的一种非常常见的方法。

在Angular2 +中，如何检测模板更改？

2 个答案: