Angular: DOCUMENT

不用原生的 document,是因为不利于后端渲染,所以避免使用原生浏览器的对象

typescript 复制代码
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;
    ...
  }
}
相关推荐
一枚前端小能手11 分钟前
🔥 重学Vue之computed、watch、watchEffect原理与用途详解
前端·javascript·vue.js
Amos_Web23 分钟前
Rust实战课程--网络资源监控器(初版)
前端·后端·rust
神秘的猪头25 分钟前
html5与js今日笔记
前端
Zyx200726 分钟前
JavaScript 中的对象字面量与代理模式:用代码演绎“爱情故事”
javascript
程序猿小蒜26 分钟前
基于springboot的基于智能推荐的卫生健康系统开发与设计
java·javascript·spring boot·后端·spring
渣哥26 分钟前
IOC 容器的进化:ApplicationContext 在 Spring 中的核心地位
javascript·后端·面试
Zyx200727 分钟前
🎹用 HTML5 打造“敲击乐”钢琴:前端三剑客的第一次交响曲
前端
小时前端27 分钟前
面试官:我为什么总在浏览器存储问题上追问IndexedDB?
前端·浏览器
前端小菜哇28 分钟前
前端如何优雅的写一个记忆化函数?
前端
今禾29 分钟前
Git完全指南(下篇):Git高级技巧与问题解决
前端·git·github