检查由 Angular Universal 渲染的组件的宽度

Question

我有一个（轮播）组件需要检查元素的宽度。

在浏览器中：我可以调用 ngAfterViewInit 并从 @ViewChild 句柄中获取宽度。但是当它被 Universal 渲染时它的宽度是 0.

这是因为通用生成的 dom 仍然显示，但浏览器生成的 dom（我的句柄指向的位置）要么在文档片段中，要么只是不显示。

ngAfterContentChecked 和 ngAfterViewChecked 可以解决问题，但我不希望它保留运行.

我想在交换 dom 之后我需要一个生命周期钩子。

Answer 1

我最后使用 setInterval 继续检查宽度。

@Component({
    selector: 'my-component',
    template: `<div #child></div>`
})
export class MyComponent {
    @ViewChild('child') childEl: ElementRef;
    constructor( Inject('isBrowser') private isBrowser ){}
    doTheThing() {
        // do the thing you wanted to do
    }
    ngAfterViewInit() {
        if( this.isBrowser ){
            if( this.childEl.nativeElement.clientWidth > 0 ){
                this.doTheThing();
            } else {
                let interval = setInterval( () => {
                    if( this.childEl.nativeElement.clientWidth > 0 ){
                        this.doTheThing();
                        clearInterval( interval );
                    }
                }, 10);
            }
        }
    }
}

检查由 Angular Universal 渲染的组件的宽度

Check width of component rendered by Angular Universal

angular-universal

angular