不用原生的 document，是因为不利于后端渲染，所以避免使用原生浏览器的对象
import { DOCUMENT } from '@angular/common';
import { Directive, Inject, Input, OnChanges, Output, Renderer2, SimpleChanges } from '@angular/core';
@Directive({
selector: '[appClickoutside]'
})
export class ClickoutsideDirective implements OnChanges{
@Input() bindFlag = false; // 是否监听 document
private handleClick: ()=> void;
constructor(
@Inject(DOCUMENT) private doc: Document,
private rd: Renderer2
) {
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['bindFlag'] && !changes['bindFlag'].firstChange) {
if (this.bindFlag) {
this.handleClick = this.rd.listen(this.doc, 'click', evt=> {
// 点击事件的操作
})
}else {
this.handleClick(); // 解绑
}
}
}
getDocument() {
// 获取 document 的属性
this.doc.documentElement.clientWidth；
this.doc.body.offsetWidth；
this.doc.documentElement.clientHeight；
this.doc.body.offsetHeight；
...
// 设置 document 的属性
this.doc.documentElement.scrollTop = 0;
...
}
}
文章来源地址https://www.toymoban.com/news/detail-807650.html
文章来源：https://www.toymoban.com/news/detail-807650.html
到了这里，关于Angular： DOCUMENT的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
