angular 页面缩放时调整css

问题背景

登录界面:

由于之前登录框设置的是绝对位置，所以在浏览器页面缩小后，登录框的位置会缩到看不见的地方。

比如left字段，设置的是370px。 当页面宽度缩小至400左右时，登录框就会由于向右偏移了370px,而导致登录框消失。

.loginBox {
  background-color: #F0F4F6;
  /*上divcolor*/
  border: 1px solid #BfD6E1;
  border-radius: 5px;
  color: #444;
  margin:  auto;
  width: 388px;
  height: 400px;
  left: 370px;
  top: 200px;
}

之后想谷歌找一下相关的解决方法，没有搜到，也可能是关键词不对。

于是想尝试当页面缩放时，动态地修改css样式。

Angular 获取页面缩放事件

什么是 BOM

首先我们要了解BOM。

BOM ( Browser Object Model )即浏览器对象模型, 它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。

另外BOM是浏览器厂商在各自浏览器上定义的,各个浏览器会有不一样的地方。

window窗口有很多事件，比如有:
Scroll： 鼠标滚轮滑动事件
Back: 页面后退
Resize：窗口大小变更
等

BOM比 DOM更大，它包含DOM



可以形象地表述：

window对象是浏览器的顶级对象,它具有双重角色。

1.它是 JS 访问浏览器窗口的一个接口。

2.它是一个全局对象。 定义在全局作用域中的变量、函数都会变成window对象的属性和方法。

例如，在控制台定义一个name

监听window的 resize事件

Resize：窗口大小变更。 就是本次我们需要监听的目标

在Angular中，我们可以使用 Observable 类提供的 fromEvent 函数来监听resize事件

代码：

ngOnInit(): void  {
    fromEvent(window, 'resize')
      .pipe(throttleTime(50), debounceTime(50))
      .subscribe((event) => {
       console.log('页面变化了');
    }
}

结果：
当调整窗口大小时，控制台打印。 可以看到window也有的这个属性。

动态改变样式

angular中有好几种方式可以动态地改变样式。

这里先说说我用的第一种：

不操作DOM 使用 ngStyle

核心：

ts:

private widthTemp : string = "100px";
private backgroundTemp : string = '#000'; 

// 想要更改样式时直接更改 changeClass的值。
this.widthTemp = '200px;';
this.backgroundTemp = '#069'

html:

<div [ngStyle]="{'background-color':backgroundTemp,'width': widthTemp}">></div>

其用法和 普通标签中的 style 属性类似，只不过angular 将其做成了动态绑定的形式。
<h1 style="text-success">test</h1>

代码实现：

html

<thy-card  [ngStyle]="{'width': width, 'height': height, 'top': top, 'left': left}">  

ts:

// 动态改变临界值
widthInit = 1200;
heightInit = 400;

// 初始值
width: string = "350px";
height: string = "400px";
left: string = "370px";
top: string = "200px";

ngAfterViewInit() {
    fromEvent(window, 'resize')
      .pipe(throttleTime(50), debounceTime(50))
      .subscribe((event) => {
        // 操作
        console.log('页面变化了');
        //网页可见区域宽：
        const width = document.documentElement.clientWidth;
        //网页可见区域高：
        const height = document.documentElement.clientHeight;

        if (this.widthInit > width) {
          this.width = width + "px";
          this.left = 0 + "px";
        }
        if (this.heightInit > height) {
          this.height = height + "px";
        }
        if (height < 600) {
          this.top = 0 + "px";
        }

      });
}

1.首先我们需要通过 DOM 获取 当前 client 的 长度和高度

//网页可见区域宽：
const width = document.documentElement.clientWidth;
//网页可见区域高：
const height = document.documentElement.clientHeight;

console.log(width, height);

测试：

单位为px;

2.判断

判断当客户端的 width 或者 height 小于临界值时，改变登录表单的css。

例如，设置 left 属性为0， 高度小于600时设置top属性为0。

当height 小于 临界值时， 把登录表单的高度设置为窗口的高度。

这个临界值可以为登录表单的原始高度或者自己调整。

当然，还可以设置当窗口放大恢复时，把登录表单设置为原始数据。

 if (this.widthInit > width) {
          this.width = width + "px";
          this.left = 0 + "px";
        }
        if (this.heightInit > height) {
          this.height = height + "px";
        }
        if (height < 600) {
          this.top = 0 + "px";
        }
}

效果图：

稍微比之前的可观了一些。

2.操作DOM，修改其样式达到效果

动态修改样式的第二种方式:

ts:
<div class='old-style' #demo></div>

html:

import { Component, ElementRef, ViewChild, Renderer2 } from '@angular/core';
...
export class DemoComponent implements OnInit {

    constructor( private renderer2 : Renderer2) { }
    
    @ViewChild('demo')  demo: ElementRef; 
    
    ngOnInit(){
        this.renderer2.setAttribute(this.demo.nativeElement, "style","width: 200px;background: #006699;"); 
    }
}

在项目中有时候需要直接操作DOM，但是这样直接访问 DOM 会导致应用很容易受到攻击。所以并不建议直接访问 DOM。
在Angular 访问DOM 需要使用 Render2 来实现自定义渲染。

Renderer2类 是Angular以服务的形式提供的抽象类，允许操作当前应用的元素，而不用直接访问最原始的DOM元素。

这里就使用renderer2的 setAttribute方法， 给其的style属性赋值。

这里是修改多个style所以用setAttribute，如果是修改单个style则使用 this.renderer2.setStyle(ele,name,value)

类似的，renderer2也有增加或者删除class的方法

this.renderer2.removeClass(this.demo.nativeElement, "old-style"); 
this.renderer2.addClass(this.demo.nativeElement, "new-style"); 

3.不操作DOM使用 ngClass修改class

ts:

private changeClass : boolean = false;

// 想要更改样式时直接更改 changeClass的值。

html:

<div [ngClass]="changeClass ? 'new-class' : 'old-class' "></div>

当changeClass为false时 div class为old-class 为true时calss为 new-class

除这几个个之外，也有其他方法，但比较复杂和不安全。在这里没有细说。
详细可以查看这篇文章： https://medium.com/swlh/6-way...