Angular动态调整DOM中的属性

Question

如果有人更改浏览器的窗口大小，我有一个关于在Angular中调整屏幕大小的问题。在这里我的代码：

// TS文件

height: number = 2.5;
objHeight:number;
screenHeight:number = window.innerHeight;

public createNumber() {
this.objHeight = this.screenHeight / this.height;
}


ngOnInit(){
this.createNumber();
}

onResize(event) {
event.target.innerWidth;
console.log(event);
this.objHeight = this.screenHigh / 2.5;
}

// HTML文件

<div *ngFor="let datas of data; let i = index" (window:resize)="onResize($event)">  


        <ul id='list'>
            <li class='list-item' [id]=d atas.id [ngStyle]="{ 'transform': 'rotate('+rotateAngleArray[i]+'deg) translate(0,-'+objHeight+'px) rotate(-'+rotateAngleArray[i]+'deg)' }">

                <div class='label1'>
                    <img alt='notfound' class='img2' src='any picture'>
                </div>
                <div class='label2'>
                    {{ datas.name }}
                </div>
                <div class='label3'>
                    {{ datas.id }}
                </div>
                <div class='label4'>
                    {{ datas.rev }}
                </div>
            </li>
        </ul>
    </div>

当应用程序运行时我改变浏览器的窗口大小时，总是调用onResize（event）函数。但是，每当我改变浏览器的窗口大小时，如何管理它以自动更新我在[ngStyle]="{ 'transform': 'rotate('+rotateAngleArray[i]+'deg) translate(0,-'+objHeight+'px) rotate(-'+rotateAngleArray[i]+'deg)' }"的objHeight？

我将衷心感谢您的帮助

Answer 1

screeHeight属性在组件生命周期中永远不会更改，您只需设置一次。无论如何，Observable方式更清晰：

import {fromEvent} from 'rxjs/observable/fromEvent';
import {startWith, map} from 'rxjs/operators';
ojbHeight$:Observable<number>;
ngOnInit() {
     this.objHeight$ = fromEvent(window, 'resize').pipe(
       startWith(null), 
       map(this.getHeight.bind(this))
    );
}
getHeight() { return window.innerHeight/this.height; }

模板：

<div [style.height.px]="objHeight$|async"></div>