角度动态调整 DOM 中的属性答案

【问题标题】：Angular resize dynamically a property in the DOM角度动态调整 DOM 中的属性
【发布时间】：2018-03-06 04:34:56
【问题描述】：

如果有人更改浏览器的窗口大小，我会在 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) 函数。但是，每次我更改浏览器的窗口大小时，我如何管理它以自动更新我的 objHeight [ngStyle]="{ 'transform': 'rotate('+rotateAngleArray[i]+'deg) translate(0,-'+objHeight+'px) rotate(-'+rotateAngleArray[i]+'deg)' }"？

非常感谢您的帮助

【问题讨论】：

您是否尝试过引入 ChangeDetectorRef 并调用 detectChanges()？看起来这可能超出了 Angular 的范围。
我认为目前的方式没有任何问题，您是否要求替代解决方案？
@chrispy 我不知道这是否是我需要的，因为每次我更改浏览器的窗口大小时，onResize(event) 都会触发，但它不会升级我在 HTML 文件中的objHeight /跨度>
@PankajParkar 我的问题是objHeight 属性在运行应用程序并同时调整浏览器窗口大小时不会更改/升级 HTML 文件。 onResize(event) 确实会被每次窗口大小更改触发，但不会更改 objHeight 的值。
Kamui，我明白调用了函数。 detectChanges 可能会将您的支持值强制到视图中，这似乎正是您的问题。

标签： html angular typescript dom window-resize

【解决方案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>

【讨论】：

是的，我注意到我只设置了一次，这是我的第一个问题。但我也寻找了一种更清洁的方法来实现这一点，因为我对 Angular 很陌生，现在还不知道最好的解决方案。谢谢你的帮助，这就是我搜索的内容:)