[英]Which event will be fired after inner html has completely rendered in DOM tree?
I want to know what event will be fired when the innerHtml
property of any div
is changed and DOM the tree for that div
is completely loaded into memory. 我想知道当任何
div
的innerHtml
属性更改并且该div
的树的DOM完全加载到内存中时将触发什么事件。
I want to invoke the following function after that event is fired. 我想在触发该事件后调用以下函数。 I want to remove the
setTimeout()
hack in the following function as it may fail sometime. 我想删除以下函数中的
setTimeout()
hack,因为它有时可能会失败。
private registerEventListenersForLink() {
let _self = this;
setTimeout(function () {
var AElemList = document.querySelectorAll('.appmedia-content-wrapper a');
for (let i = 0; i < AElemList.length; i++) {
AElemList[i].addEventListener("click", function (event) {
event.preventDefault();
event.stopPropagation();
var url = event.target["href"];
if (url && url.trim() != '') {
_self.utilService.openUrlExternaly(url);
}
});
}
}, 80);
}
I have found following links related to above issue but I haven't got any ideas out of it: 我发现以下与上述问题相关的链接,但是我没有任何想法:
Event to determine when innerHTML has loaded 确定何时加载innerHTML的事件
https://www.w3.org/html/wg/spec/apis-in-html-documents.html#dom-innerhtml https://www.w3.org/html/wg/spec/apis-in-html-documents.html#dom-innerhtml
I fixed my issue. 我已解决问题。 I have implemented a directive as follows and it has worked like a charm.
我已经实现了如下指令,它的工作就像一个魅力。 Thank you Rory McCrossan for pointing me at MutationObserver api.
感谢Rory McCrossan将我指向MutationObserver api。
import { Directive, ElementRef } from '@angular/core';
import { UtilService } from '../../providers/util-service';
@Directive({
selector: '[external-links]' // Attribute selector
})
export class ExternalLinks {
private observer;
constructor(private elRef: ElementRef, public utilService: UtilService) {
}
ngAfterViewInit() {
var _self = this;
this.observer = new MutationObserver(mutations => {
mutations.forEach(function (mutation) {
if (mutation.type == 'childList') {
var AElemList = _self.elRef.nativeElement.querySelectorAll('a');
for (let i = 0; i < AElemList.length; i++) {
AElemList[i].addEventListener("click", function (event) {
event.preventDefault();
event.stopPropagation();
var url = event.target["href"];
if (url && url.trim() != '') {
_self.utilService.openUrlExternaly(url);
}
});
}
}
});
});
var config = { childList: true };
this.observer.observe(this.elRef.nativeElement, config);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.