共计 3476 个字符，预计需要花费 9 分钟才能阅读完成。
问题背景
登录界面:
因为之前登录框设置的是相对地位，所以在浏览器页面放大后，登录框的地位会缩到看不见的中央。
比方 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…
