Angular.js Dom渲染需要超时来检测元素高度

Question

在我的指令中，我有以下内容，它们通常可以检测图像的正确高度。然而，它很少在没有超时攻击的情况下工作。有没有更可靠的方法来做到这一点？

import {Directive, ElementRef, Renderer} from '@angular/core';


    @Directive({
        selector: '[custom-header]', // Attribute selector
    })
    export class CustomHeader {

        header: any;
        headerHeight: any;

        constructor(public element: ElementRef, public renderer: Renderer) {
            // console.log('Hello CustomHeader Directive');
        }


        ngAfterContentInit() {

            var test = this.element.nativeElement;
            setTimeout(function () {
                var content = test.getElementsByClassName('header-image')[0];
                alert(content.clientHeight);
            }, 600);

        }

    }

在组件视图中(我使用的是Ionic)；

<ion-header class="header" custom-header id="header">
    <a  (click)="goToRoot()" ><img class="header-image" src="assets/img/topBar-iPad.png" alt=""/></a>
</ion-header>

Answer 1

这可能对你有用

<img class="header-image" src="assets/img/topBar-iPad.png" alt="" 
    #me (load)="headerHeight = me.clientHeight"/>