乐趣区

关于angular:angular-页面缩放时调整css

jiezi

问题背景

登录界面:

因为之前登录框设置的是相对地位，所以在浏览器页面放大后，登录框的地位会缩到看不见的中央。

比方 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…

退出移动版