我一直在尝试将我的应用程序转换为Angular Universal,并且大部分情况下都很好。
但是我之前读到了一些需要注意的事项:https://github.com/onespeed-articles/angular-universal-gotchas
它建议我不要使用timeout
,这很烦人,因为在AngularJS中,您可以使用它来确保元素的尺寸正确等,在视图呈现后再触发事件。
我还看到有人说它仍然存在于Angular 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秒。如果这是不好的做法,那么应该使用什么替代方法?
@HostListener()
我有一个问题。我没有意识到它在服务器端渲染时不会触发。有没有其他替代方案我应该使用呢? - undefined@HostListener
和其他 Angular 功能。请记住,Angular Universal 只是在服务器上使用编译后的 Web 应用程序捆绑包预渲染 HTML。然后将该 HTML 发送到 Web 浏览器,并且 Angular 进行“水合”以将当前的 Angular 状态与已经渲染的 HTML 匹配。 - undefined