所以我一直在尝试将我的应用程序转换为角度通用的,并且在大多数情况下它都很好。
但我之前读过一些“陷阱”:https://github.com/onespeed-articles/angular-universal-gotchas https://github.com/onespeed-articles/angular-universal-gotchas
这表明我不应该使用timeout
这很烦人,因为在角js您可以使用它在渲染视图后触发事件,这样您就可以确保元素的尺寸是正确的,等等。
我还读到它仍然存在角6所以我有这个指令:
import { Directive, ElementRef, AfterViewInit, Input, HostListener } from '@angular/core';
@Directive({
selector: '[pyb-button-group]'
})
export class ButtonGroupDirective implements AfterViewInit {
@Input() className: string;
@HostListener('window:resize', ['$event'])
onResize() {
let resize = this.resize;
let element = this.element;
let className = this.className;
setTimeout(function () {
resize(element, className);
}, 500);
}
constructor(private element: ElementRef) {
}
ngAfterViewInit() {
this.resize(this.element, this.className);
}
resize(nativeElement, className) {
let elements = nativeElement.nativeElement.getElementsByClassName(className || 'btn-choice');
let headerHeight = 0;
for (var i = 0; i < elements.length; i++) {
let element = elements[i];
let header = element.getElementsByClassName('header');
if (!header.length) return;
header = header[0];
header.style.height = 'auto'; // Reset when resizing the window
let height = header.offsetHeight;
if (height > headerHeight) headerHeight = height;
}
for (var i = 0; i < elements.length; i++) {
let element = elements[i];
let header = element.getElementsByClassName('header');
if (!header.length) return;
header = header[0];
header.style.height = headerHeight + 'px';
}
}
}
当浏览器调整大小时,它会等待 0.5 秒,然后再尝试调整按钮组的大小。
如果这是不好的做法,我应该使用什么来代替?
您希望该代码在浏览器而不是服务器中运行。您提供的链接为您提供了解决方案:
if (isPlatformBrowser(this.platformId)) {
//your setTimeout here
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)