Angular 在 DOM 中动态调整属性的大小

Question

如果有人更改浏览器的 window 大小，我会遇到有关在 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) 函数总是被调用，因为我在应用程序运行时更改浏览器的 window 大小。但是，每次我更改浏览器的 window 大小时，我如何管理它以自动更新 [ngStyle]="{ 'transform': 'rotate('+rotateAngleArray[i]+'deg) translate(0,-'+objHeight+'px) rotate(-'+rotateAngleArray[i]+'deg)' }" 的 objHeight？

非常感谢您的帮助

Answer 1

screeHeight-property在组件生命周期中永远不会改变，你只需设置一次。无论如何，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>

Angular 在 DOM 中动态调整属性的大小

Angular resize dynamically a property in the DOM

html

dom

window-resize

typescript

angular

Angular 在 DOM 中动态调整 属性 的大小

Angular resize dynamically a property in the DOM

html

dom

window-resize

typescript

angular

Angular 在 DOM 中动态调整属性的大小