Question

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

在浏览器中：我可以调用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渲染的组件宽度

1 个答案: